CSS: Margin vs Padding

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

padding is the area inside the border.

margin is the area outside the border.

In CSS, you can draw a border around a HTML element, like this:

p {border:solid thin blue}

CSS Padding

The code:

div.xyz {padding: 10px 20px 30px 40px}

is a shorthand to the following:

div.xyz
{
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

Padding cannot be negative.

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

1. padding: all_sides
2. padding: top/bottom left/right
3. padding: top left/right bottom
4. padding: top right bottom left

Box model#propdef-padding

〔►see CSS: Units〕

CSS Margin

this code:

div.xyz {margin: 1em 2em 3em 4em}

is equivalent to the following:

div.xyz
{
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 4em;
}

Margin can be negative.

“margin” can have 1 to 4 values, same as padding.

Reference

• Box model#propdef-border
• Box model