Margins and Padding
In this section, we'll take a look at two ways to space
things out a bit: margins and padding.
Cramped Borders
This is a cramped <div>!
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.
Non-uniform Padding
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.
Non-uniform Padding (Results)
No padding
Top: 10px; bottom: 0px
Left: 5em; right: 0px
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:
Shorthand Padding
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.
Shorthand Padding (Results)
padding: 20px (all)
padding: 20px 40px (top/bottom, right/left)
padding: 20px 40px 10px (top, right/left, bottom)
padding: 20px 40px 10px 30px (top, right, bottom, left)
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:
Two Margin Blocks
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).
Two Margin Blocks (Results)
margin: 40px (all)
padding: 5px (all)
margin-top: 20px
margin-right: 80px
margin-bottom: 40px
margin-left: 60px
padding: 5px (all)
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.
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.