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; }