Margins, Borders, and Padding

18 Oct 2015
The differences between margin, border, and padding

Every element in an HTML document has three attributes that determine it's profile on a web page: margin, border, and padding. These three attributes are typically understood as if each one is a box nested within another.

The standard model as used in Chrome and Firefox dev tools.

Margin

The margin is the outermost box; the margin itself is invisible, but its edges can be seen where it meets the edge of the browser window or other elements. Margins are best for keeping elements a minimum distance apart.

Here, we can see how the element's position changes from large margins to small.

Border

The border lines the inner edges of the margin, and outer edges of the padding. Borders are invisible by default ( technically at a width of 0 ), but can be set to any width and color. Good borders can really make a page more pop or make a page flow better.

Remember that the border has its own size, and it will affect elements' positioning.

Padding

The padding is the innermost of these three attributes. Padding separates the content of an element from the border, like insulation in the walls of a building. Padding and borders go hand-in-hand, and you'll find yourself adjusting one for the benefit of the other.

Here's a big difference in padding sizes.

Remember that each side of an element has its own margin, and padding, while the border is the same all around. The examples above show padding and margins that are equal on all sides, but that isn't always the best layout. Once you work with these attributes, you'll better understand how to adjust them and achieve the look you want.

Previous: Git | Next: Arrays and Hashes