Home   About   Technical   Cultural   Contact

---

The Difference Between Margin, Border, and Padding

July 24, 2014

Border, margin and padding are all properties in CSS. Padding is the space between the content and the border, whereas margin is the space outside the border. In other words, margin is applied to the outside of your element and affects how far your element is from other elements. Padding is applied to the inside of your element and affects how far your element's content is from the border. And the CSS border property allows you to specify the style and color of an element's border. Ways to define the margin, padding and border properties can be found in the "Understanding border, margin and padding properties" link below.

Using margin will not affect your element's dimensions. Using padding will affect your element's dimensions (e.g., if you have a 100px x 100px div with a 2px padding, your div will actually be 102px x 102px).

The biggest difference between padding and margin is that margins auto-collapse and padding does not. Consider, for example, two elements next to each other, both with padding of 1em. This padding is considered to be part of the element, and is always preserved. Therefore, you will end up with: First Element Content > First Element Padding > Second Element Padding > Second Element Content. Thus, the content of the two elements will end up being 2em apart.

If we replace that padding with a 1em margin, you will end up with: First Element Content > 1em Combined Margin > Second Element of Content. Thus, the content of the two elements here will end up being 1em apart. Again, margins are considered to be outside of the element, and margins of adjacent items will overlap. This can be really useful when you know that you want a specific amount of space around an element regardless of what element it is next to.

By default, I tend to use margin, except when I have a border or background and want to increase the space inside that visible box. Hope this was helpful!

Helpful Links:

Mastering CSS Coding: Getting Started
Understanding border, margin and padding properties