Margins and Padding

In the previous section, you might have noticed that the in the border examples, the text and the borders were rather close together.

In this section, we'll take a look at two ways to space things out a bit: margins and padding.

Padding

An element's padding is the element's "extra space inside the border". There are four padding properties: padding-top, padding-bottom, padding-left, and padding-right. You may set these values to px, em, percentages, or any other valid length unit.

div.padded {
  border: 3px solid;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5em;
  padding-right: 0px;
  background: #ccccff;
}

The example <div> has 10px of padding on the top, 5em of padding on the left, and no padding on the right or bottom. The background color of each div is set to a light blue to make the boxes stand out a little. We'll also include an unpadded <div> for comparison.

5em ("five m-widths") is considerably larger than 10px, so the text is shoved over to the right. You are probably seeing a good deal of white space to the right of the text, even though we explicitly set the padding-right to zero. That's because the text isn't long enough to stretch to the right-hand side of the box. If it was, the text would break normally at the edge of the box.

Shorthand Notation

There is also a shorthand property, padding. This property allows you to specify all your padding on one line:

padding: 20px

Padding for all four sides is 20 pixels.

padding: 20px 40px

Padding for the top and bottom is 20 pixels, the left and right is 40 pixels.

padding: 20px 40px 10px

Padding for the top is 20 pixels, the left and right is 40 pixels, and the bottom is 10 pixels.

padding: 20px 40px 10px 30px

Padding for the top is 20 pixels, the right is 40 pixels, the bottom is 10 pixels, and the left is 30 pixels.

The most useful formulation is the first one -- and if you can remember the proper order, the last one. Let's see all four in action:

div {
  border: 3px solid;
}

div.one {
  padding: 20px;
  background: #ccccff;
}

div.two {
  padding: 20px 40px;
  background: #ffffcc;
}

div.three {
  padding: 20px 40px 10px;
  background: #ffcccc;
}

div.four {
  padding: 20px 40px 10px 30px;
  background: #ccffcc;
}

Again, it is difficult to see the effects of the right-hand side padding because the text does not extend all the way to the right edge of the box.

Notice that the outer edges of the boxes do not touch the border of the overall "results" box. That's because every "results" box has its own padding setting, set by the style sheet of this tutorial.

Margins

Margins are similar to padding. There are four margin properties: margin-top, margin-bottom, margin-left, and margin-right. There is also a shorthand property, margin, which uses the same syntax as the padding property.

The key difference between margins and padding is that margins add extra space outside the border:

div.even {
  background: #ffcccc;
  border: 3px solid;
  padding: 5px;
  margin: 40px;
}
div.uneven {
  background: #ffcccc;
  border: 3px solid;
  padding: 5px;
  margin-top: 20px;
  margin-right: 80px;
  margin-bottom: 40px;
  margin-left: 60px;
}

We've set the padding to a uniform 5px, and we've set the background color to provide a little contrast. The first box's margin is set to a uniform 40px. The second box's margin is set to four different values. (The equivalent shorthand setting is "margin: 20px 80px 40px 60px".)

Note that the previous examples on padding had extra <br> tags inserted between the <div>s to provide a little vertical separation. There is no such "cheating" here; all vertical separation is due to the margins of the inner blocks (and the padding of the outer block).

Collapsing Vertical Margins

There is an extra complication with margins. At first glance you might guess that in the example above, the vertical separation between the two inner blocks would be 80px: 40px for the bottom margin of the first block plus 40px for the top margin of the second block. However, the margins collapse to 40px.

Vertical margins (under certain circumstances) collapse. Collapsing occurs only if:

• the margins are vertical (horizontal margins never collapse)
• the blocks are adjacent (if there is anything between the blocks, the margins do not collapse).
• the blocks are left in the normal "flow" of the page. You can remove blocks from the normal "flow" by using CSS-P (CSS - Positioning). We'll touch on this very important aspect of CSS in the advanced section of this tutorial.