CSS: Margin vs Padding

By Xah Lee. Date: . Last updated: .

What's the difference between CSS's margin and padding?

css padding vs margin

Padding Syntax

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

They are shorthands to the following:

Padding value cannot be negative.

Examples:

div.x468 {padding: 5px}

div.x390
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

Margin

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

Examples:

div.x468 {margin: 5px}

div.x390
{
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
}

Box Model