Christelle's Blog

Reflections of my journey through Dev Academy.

What is the difference between Margin, Border, and Padding?

by Christelle Quilang on 24 April 2022

Click here to skip to the summary.

An element with content takes up space. The size of content can be specified.

content box
100px by 100px content.
This box was styled with this code:
You can also see this by navigating the DOM Inspector.

Padding goes around the element. This is transparent.

content with padding
100px by 100px content with 10px padding.
10px was added to the top, right, bottom, and left sides of the box above.
Notice that the text is no longer at the edge of the box.
Note, the padding takes the color of the content.
This content with padding was styled with the following code:

The border goes around the element, and if present, the padding also.

content with a border
100px by 100px content with a 10px border.
This figure was styled with the following code:
content with padding and a border
100px by 100px content with 10px padding and a 10px border.
This figure was styled with the following code:

The margin clears the area outside the border. That is, the margin is the space between the borders of elements that are next to each other. It is also the space between the borders of an element and the edges of the browser screen.

content with padding, a border, and a margin
100px by 100px content with 10px padding, a 10px border and a 50px margin.
50px is added to all sides of the content.
This figure was styled with the following code:
The DOM Inspector reflects the space taken up by each level (content, padding, border and margin) of an element:

In sum, the difference between the margin, border, and padding is how many levels away they may be from the content:

  • The margin is the space between the borders of elements next to each other, and between the borders of elements and the edges of the screen visible to the user. Between the margin and the content may be the border and the padding.
  • The border is the space that wraps around the content, and if present, the padding also. Between the border and the content may be the padding.
  • The padding is the space that wraps around the edges of the content. There is nothing between the padding and the content.