CSS: Margin vs Padding

Difference between margin and padding

• padding is the area inside the border.
• margin is the area outside the border.
• border is between margin and padding. [see CSS: Border]

Padding Syntax

“padding” can have 1 to 4 values, separated by space:

• padding: AllSides
• padding: TopBottom LeftRight
• padding: Top LeftRight Bottom
• padding: Top Right Bottom Left

They are shorthands to the following:

• padding-top: value
• padding-right: value
• padding-bottom: value
• padding-left: value

Padding value cannot be negative.

Example

.aaa {
 padding: 1rem;
}

.bbb {
 padding-top: 1rem;
 padding-bottom: 1rem;
 padding-left: 1rem;
 padding-right: 1rem;
}

• CSS: Length Units

Margin

The syntax of margin is same as padding. But margin values can be negative.

Example

div.aaa {
 margin: 1rem;
}

div.bbb {
 margin-top: 1rem;
 margin-bottom: 1rem;
 margin-left: 1rem;
 margin-right: 1rem;
}