Something I get asked quite a bit is, what is the difference between margin and padding? When should I use which? From a purely visual point of view, while it may sometimes seem that setting margin: 10px is equivalent to setting padding: 10px, there is a key conceptual difference between them.

Here’s a CodePen demonstrating some paragraphs that use padding, and some that use margins. If it weren’t for the pink border, some of these paragraphs would appear to have the same spacing around them. You can try removing it to see for yourself.

The Box Model

To truly understand the difference between margin and padding, it’s important to understand the Box Model. The Box Model describes how a block-level element should be rendered within the document. It is a rectangular box that consists of four parts: the content area, the padding area, the border area, and the margin area.

The innermost area is the content area, where the actual content of the element lives. The size of the area will scale with the size of the content, but you can also set the size artificially.

The padding area is the spacing immediately surrounding the content area. If you were to set the background property on the element, it would fill both the content area and the padding area, so you can think of padding as an extension of your actual content.

The border area encloses the padding and content areas, and its size depends on the border or border-width properties. It is the edge between the internal and external properties of the element.

The margin area is the space beyond the border that separates the element from neighboring elements, so it is external to the element content. Sometimes margins from different elements even collapse into a single margin as a way to produce consistent spacing around the document.

Box-sizing

By default, the width and height properties of the element refer to the content area width and height. This is because the default value of the box-sizing property is content-box.

So, an element with 5px margin, 5px border, 5px padding, and content width and content height of 30px by 30px, would in total span 60px by 60px on the page.

Width occupied on screen:
60px = 5px (margin-left) + 5px (border-left) + 5px (padding-left)
     + 30px (content width)
     + 5px (padding-right) + 5px (border-right) + 5px (margin-right)

Setting the box-sizing property to border-box means that the width and height properties are now inclusive of the content area, the padding, and the border. So if we kept the same margin, border, and padding as in the above scenario, and specified a width of 30px, it would now mean the actual width of the content area is 10px.

Content width:
10px = 30px (total width)
     - 5px (border-left) - 5px (padding-left)
     - 5px (border-right) - 5px (padding-right)
     
Width occupied on screen:
40px = 5px (margin-left) + 5px (border-left) + 5px (padding-left)
     + 10px (content width)
     + 5px (padding-right) + 5px (border-right) + 5px (margin-right)

Note that it also means that the element takes up 20px less space on the screen, because the width of the margin area is not part of the box-sizing calculation. Margin is not contained within the Box Model of an element, because its sole purpose is to describe the elements relationships with other elements.

Inline-level elements

Inline-level elements use the box model, too, although it is applied in a slightly different way. Instead of being laid out vertically like block-level elements, they are laid out horizontally using a line box. Although the box model has slightly different behavior in this scenario, the margin is still describing the element’s relationship to the surrounding inline content, and the padding is still an extension of the inner content.

The bottom line

If you need to add some spacing around an element and you’re not sure whether it should be margin or padding, ask yourself these questions:

• Am I adding the spacing to put distance between this element and another element? If so, use margin.
• Is the spacing essential to how my users should interpret the element on its own? Put another way, is the spacing an extension of the inner content? If so, use padding.