First time visitor? The tutorials start here.

CSS margin and padding properties

I am putting these two together because they share some similarities, and also to demonstrate their differences.

margin properties

margin refers to the white-space (empty area) surrounding the outside of an element. There are four specific margin properties…

X X X X X X X X X X X X X X X X
margin
X X X X X X X X X X X X X X X X
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

padding properties

padding is the white-space inside an element, surrounding its content. There are four specific padding properties…

X X X X X X X X X X X X X X X X
padding
X X X X X X X X X X X X X X X X
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Hmm, pretty much like margins. 😉

Similarities and differences

Both margin and padding can be defined in px, em, or pt, although I prefer to save “pt” for font-size when printing.

% may also be used for left and right margins, as well as all four sides of padding.

For CSS that will only be used for print, in (inches), cm (centimeters), and mm (millimeters) work well with both margin and padding.

Another valid attribute for left and right margin is auto, but auto doesn’t work with padding.

What do “auto” margins do? If, for example, you define a paragraph to be narrower than its available space and define its left and right margins as auto, the paragraph will be horizontally centered within its available space, without centering the content itself within the paragraph.

A visual:

This paragraph takes up 60% of its available width, has a gray border, and is centered horizontally on the page. Here is the CSS I used for this paragraph:

p {
   width: 60%;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #ccc;
}

Size does matter

Another difference between margin and padding is that padding will increase the size of an element if width and/or height are also defined.

It’s actually a bit similar, if you think about it. If you…

  • have 500px of available width,
  • put an element there, defining it to be 480px wide,
  • add 10px to the left and 10px to the right…

…this will take up the whole 500px of available width, whether the 10px on the left and right are for margins or for padding.

But let’s look at what’s happening here. When you add the 10px as margins, the inner element is still 480px wide. But when you add it as padding, you have just increased the inner element’s width to from 480px to 500px (480 width + 10 left + 10 right).

If you define width + padding + margin on something and the sum of all of those parts is greater than the width that’s available to that element, some mighty strange things could happen with your layout. Don’t say you haven’t been warned. 😉

Shorthand

Whether you’re defining margins or padding, the order is the same: top right bottom left. Think of a clock, starting at high noon before moving to 3, then 6, then 9.

margin: 1em 3em 2em 0;
padding: 3em 1em 3em 1.5em;

The above CSS does exactly the same thing as this:

margin-top: 1em;
margin-right: 3em;
margin-bottom: 2em;
margin-left: 0;
padding-top: 3em;
padding-right: 1em;
padding-bottom: 3em;
padding-left: 1.5em;

As you can see, the shorthand uses a lot less code. Less code means it’s easier to read, there is less you have to type, less storage on your website host, less bandwidth that is being used on your hosting account, and shorter loading time for people on dialup.

If the top and bottom are the same, and the left and right are the same, you could do top/bottom left/right.

Below, “0” defines both top and bottom margins, and “auto” defines the left and right margins. In the case of “auto” left and right margins, this will center the element — not the content inside the element, but the element itself — horizontally within its available space.

margin: 0 auto;

Below, “2em” defines the top and bottom padding, and “3em” defines the left and right padding.

padding: 2em 3em;

If all 4 sides are the same, you could do them all at once.

margin: 15px;
padding: 1em;

Return to the list of CSS properties

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.