John Mwaniki /   17 May 2023

What is the difference between CSS margin and padding?

When working with CSS, the margin and padding properties play a significant role in controlling the spacing and positioning of elements on a web page.

Though they both affect the layout of elements on a webpage, they have different purposes and functions. Understanding their differences is crucial for achieving the desired visual appearance and spacing of elements.

In this article, you will learn what CSS margin and padding are, how they are used, and how they differ from each other in web design.

Margin

The margin is the space around an element, outside its borders. It creates an invisible/transparent space between an element and adjacent elements by pushing them apart.

The margin can also be between an element and its container.

Every element has four margins: top, bottom, left, and right. The margin in CSS can be applied using the margin, margin-top,margin-right, margin-bottom, or margin-left properties.

The size of the margin can be specified in various units, such as pixels (px), percentages (%), ems (em), rems (rem), or auto.

Below is an HTML and CSS code for two <div> elements inside a parent div element which I will use for demonstration.

HTML Code

<div class="container">
 <div class="item1">Div 1</div>
 <div class="item2">Div 2</div>
</div>

CSS Code

.container {
  width: 100%;
  height: 150px;
  background: #bcbcbc;
}
.item1, .item2 {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  font-size: 17px;
}
.item1 {
  background: yellow;
}
.item2 {
  background: green;
}

Output

In the above example, both Div 1 and Div 2 have zero (0) margins thus no space between them and also with their container.

The margin property is used with one value to set an even/equal margin on all four sides.

Example

.item1, .item2 {
  margin: 10px;
}

This adds a 10px space/margin around the two div elements on all sides. Between the divs and their container (top and left side) are a 10px margin and a 20px margin between the two divs.

The reason why the margin between the two divs is double is that Div 1 has a margin of 10px on its right side and Div 2 also has a 10px margin on its left totaling 20px.

In the same way as using the margin property, we can specify a margin on one side using margin-top,margin-right, margin-bottom, and margin-left properties.

Example

.item1 {
  margin-left: 10px;
}
.item2 {
  margin-top: 15px;
}

This creates a 10px margin on the left of Div 1 and a 15px margin on the top of Div 2.

Besides using the margin property to set an equal margin on all sides, you can also use it to specify a margin on two, three, or four sides. This is by adding two, three, or four values to the property instead of one as I had shown you above.

This eliminates the need of having to set the margin on each side individually (in the cases where you want to set different margins on different sides).

Here is how it works:

1. When two values are used, the first value applies to the top and bottom margins, and the second value applies to the right and left margins.

Example

.item1, .item2 {
  margin: 20px 10px;
}

This creates a 20px margin on the top and bottom side and a 10px margin on the left and right sides of the two divs.

2. When three values are used, the first applies to the top, the second to the right and left, and then the third to the bottom.

Example

.item1 {
  margin: 20px 10px 0;
}

This creates a 20px margin on the top of Div 1, a 10px margin on its left and right sides, and a 0px margin on its bottom side (you don't have to specify the units when the value is 0).

3. When four values are used, the first applies to the top, the second to the right, the third to the bottom, and then the fourth to the left.

You can also use negative values for margins. This is mostly used to overlap elements or bring them closer together.

Example

.item2 {
  margin: 20px 0 0 -30px;
}

This creates a 20px margin on the top of Div 2, a 0px margin on its right and bottom side, and a -30px margin on its left side causing it to overlap with Div 1.

The margin property can also be used with the value "auto" which creates an equal margin to the left and right side of the element thus centering it horizontally.

Example

.item {
  width: 100px;
  height: 100px;
  font-size: 17px;
  background: green;
  margin: auto;
}

This creates an equal margin to the left and to the right of the div thus centering it.

Uses of Margin

Below are the uses of margins:

• To set space between adjacent elements and their container.
• To position elements on the page.
• To overlap elements on the page.

Padding

Padding is the space inside an element, between its content and its borders. It controls the internal space in an element, separating its content from its edges.

Padding is affected by the background color of the element.

Padding either grows the element’s size or shrinks the content inside. By default, the size of the element increases retaining the same content size but adding more space around it.

If you want to create a space by shrinking the content, then set the value of the box-sizing property to "border-box" (ie, box-sizing: border-box).

Similarly to the margin, padding also applies to four sides of every element (top, bottom, left, and right).

The size of the padding can be specified in various units such as pixels (px), percentages (%), ems (em), or rems (rem).

Below is a <div> element with text content and 0 padding.

<div id="mydiv">
The quick brown fox jumped over the lazy dog.
</div>

The padding property is used with one value to set an equal space around all the sides of an element's content.

Example

#mydiv {
  padding: 20px;
}

To apply padding on each side of an element individually, use the padding-top, padding-right, padding-bottom, and padding-left properties.

Example

#mydiv {
  padding-top: 20px;
  padding-left: 15px;
}

The padding property can also be used with two, three, or four values to set padding on different sides of the element at a go. It works exactly the same way as for the margin property discussed above, ie:

• When two values are used, the first value applies to the top and bottom padding, and the second value applies to the right and left padding.
• When three values are used, the first applies to the top, the second to the right and left sides, and then the third to the bottom.
• When four values are used, the first applies to the top, the second to the right, the third to the bottom, and then the fourth to the left.

Example

#mydiv {
  padding: 10px 25px 15px 20px;
}

This sets a 10px padding at the top, 25px at the right, 15px at the bottom, and 20px at the left side of the text inside of the <div> element.

Differences between CSS Margin and Padding

Below is an illustration of the margin and padding of an element.

The border is the layer that sits between the margin and padding. By default, it does not have any width.

Conclusion

CSS margin and padding are crucial in controlling the spacing and positioning of elements on a web page. It's important to understand the differences between the two to effectively structure and control the layout of web pages, achieving the desired visual appearance and spacing for an optimal user experience.

Margins create space around an element, separating it from adjacent elements, while padding creates space within an element, separating its content from its borders/edges.