Difference Between Margin and Padding

Margin vs Padding
Difference between margin and padding is an important aspect in CSS as margin and padding are two important concepts used in CSS to provide spacing between different items. Padding and margins are not interchangeable and have different purposes so must be used appropriately. The padding is the space between the content and the border of a block. The margin, on the other hand, is the space outside the border of a block. Margin separates blocks from adjacent blocks while the padding separates the border from the content.

What is Padding?

In CSS (Cascading Style Sheets), padding is the space kept between the content and the border. It separates the content of a block from its edge. The padding is transparent and includes the background image or background color of the element, as well. The amount of padding of an element is specified by using the term “padding” in CSS code. For example, to add a 25px padding around the content following code can be used.

div {
width: 300px;
height: 300px;
padding: 25px;
border: 25px solid;
}

If necessary, different padding values can be separately specified for left, right, top, and bottom as well. The following piece of code specifies different padding values for each side.

div {
width: 300px;
height: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
border: 25px solid;
}

What is Margin?

In CSS (Cascading Style Sheets), margin is the space outside the border. It separates a block from other blocks. The margin is also transparent, but a great difference with padding is that the margin does not include background images or background colors applied to the element. The amount of margin in CSS is specified using the term “margin”. The following piece of code applied a 25px margin around the div block.

div {
width: 320px;
height: 320px;
border: 5px solid;
margin: 25px;
}

Different values can be specified for different sides of the block, as well. The following piece of code applies different margin values for each side.

div {
width: 320px;
height: 320px;
border: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}

What is the difference between Margin and Padding?

• Padding is the space between the border and the content while margin is the space outside the border.
• Padding separates the content of a block from the border. The margin separates one block from the other.
• Padding consists of the background images and background colors applied to content while the margin does not content such.
• Margins of adjacent blocks can overlap while padding does not overlap.
Summary:

Padding vs Margin

Padding is the space inside the border of a block that separates the border from the content. The margin is the spacing outside the border that separates a block from the adjacent blocks. Another difference is that padding includes the background image and background colors applied around the content while margin does not contain them. The margins of adjacent blocks may sometimes overlap when the browser render the page but for padding such thing will not happen.

Images Courtesy:

1. CSS box model by Felix.leg (CC BY-SA 3.0)