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.

border is between margin and padding. [see CSS: Border]

Padding

The code:

div {padding: 1rem 2rem 3rem 4rem}

is a shorthand to the following:

div
{
padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 3rem;
padding-left: 4rem;
}

Padding cannot be negative.

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

• padding: all_sides
• padding: top_bottom left_right
• padding: top left_right bottom
• padding: top right bottom left

Margin

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

Example. This code:

div {margin: 1rem 2rem 3rem 4rem}

Is same as

div
{
margin-top: 1rem;
margin-right: 2rem;
margin-bottom: 3rem;
margin-left: 4rem;
}