CSS: Margin vs Padding

By Xah Lee. Date: . Last updated: .

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

padding is the area inside the border.

margin is the area outside the border.

css box dimensions
css box dimensions
css padding vs margin
Padding is the area insider the border, margin is the area outside the border. The border here is the black line between yellow and red.

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

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.