Margin and padding are the two major properties used to control space within and around elements and blocks. Adequate spacing is a basic but essential component of building a visually balanced and accessible design. This article walks you through the differences between margin and padding and how to use them to make blocks and elements appear smaller or larger.

Watch a video

Locating and manipulating Margin and Padding

Margin and padding can be accessed and adjusted using the accordion tools for any element, container or block.

Margin and padding can be set in a variety of both relative (%, rems, ems, vw and vh) and absolute (px) units. It is possible to set a different unit for each side of an element. To change the unit, click on it to launch a drop-down menu displaying all available options.

Click and type directly into the inputs to change values. Values can also be uniformly adjusted for all sides of an element at once, in increments of one, by clicking the plus or minus buttons.

Margin vs Padding

Both margin and padding are used to position an element by manipulating whitespace. So, what’s the difference? In many cases, both properties can seemingly be used interchangeably to create the same visual result. However, there is a difference, and understanding that difference is an important step in building better, scalable blocks.

Margin controls the space around an element while padding controls the space within an element. The difference between margin and padding is most easily seen when an element has an assigned background color or a border treatment, like a button, which almost always requires both padding and margin. Margin controls how far away the button is from other elements. Padding controls the space inside the button, and not only provides buffering room between the text and the border or edge, but it also increases the amount of clickable real-estate.

Compare elements on a page to a series of framed artwork on a gallery wall: the wall is the viewport or browser window, the framed pieces of art are elements where the content is the painting itself, the matting around the painting is the padding, the frame is the border, and, lastly, the space between the frames is the margin.

To increase the space between the frames, increase their margins. There is a finite amount of wall space, and the total width of all the elements and their respective marginal values cannot exceed that amount. To increase the space between the frame and the painting, increase the amount of “matting” or padding. As the value of the padding increases, the painting or content size decreases, in order to fit everything within the same size frame.

This is one of the major reasons our preferred unit for positioning is percentages. That “finite” amount of wall space, the browser size, isn’t so finite in practice, but instead varies for every user. Setting margin and padding in absolute values like pixels does not guarantee that our design will look its best at every size. Setting margin and padding in percentages allows those values to scale fluidly with respect to the browser size.

Keep it Simple

Blocks that contain several elements should apply general padding, the space between the elements and the edge of block, globally on the block-level or an organizational container. This allows the padding to be edited at-once, instead of element-by-element, making it faster and easier to create and maintain a consistent design.

Collapsed Margins

Margins, unlike padding, are not considered part of an element. Because of this, their calculated value is a little more flexible, and adapts to special situations, like an element’s alignment type. Block-level elements, or elements that vertically stack on top of one another, will merge or collapse their adjacent vertical margins. This behavior is designed to maintain vertical rhythm by preventing margins from doubling between elements. Let’s consider an example for further clarity:

Both elements A and B are block-level elements. Element A has a bottom margin of 5% and element B has a top margin of 10%. What’s the calculated space between these two elements? The logical assumption, adding the two values together for a total of 15%, is actually incorrect. Instead, the greater of the two values will take precedence, and the lower value will collapse to zero. The calculated space between elements A and B is actually 10%.

Collapsing behavior can be avoided altogether by setting the display type  to “inline-block” instead of “block”. Inline-block elements will honor all margin and padding values, making this the predominantly used display type for elements, containers and blocks when building themes. If a display mode of block is required, it is recommended to use equal vertical margins so that spacing is predictable. This behavior is best utilized when building layouts that require a series of equally spaced blocks or elements, where the display order is subject to change, as seen in the following example:

In the example above, the blocks are evenly spaced with 10% margin between each block. The blocks also maintain a 10% margin from the top and bottom edges of the browser window. Without collapsible margins, the space between blocks would double to 20%, while the space from the top and bottom edges of the window would remain at 10%. With collapsible margins, the blocks can be arranged in any order, and still maintain that consistent 10% margin, between blocks AND the page edges.

Summary

In conclusion, margin and padding are settings that help give blocks some breathing room. Padding controls the internal space within an element  and margin controls the external space around an element. Stick to percentage values to keep your designs scaleable, and apply padding on the outermost container whenever possible