HTML and CSS Reference
In-Depth Information
Table 6-2.
Differences Between Padding and Margins
Feature
Padding
Margins
Background
The content's background stretches into
padding.
The background of the content's parent
element shows through margins.
Border
Padding goes inside the border.
Margins go outside the border.
Collapsing
Padding never collapses.
Adjacent vertical margins collapse.
To demonstrate the differences, the styles in comparison.html in the ch06 folder add a background color
to the
<body>
of the page, which contains two
<div>
elements. Both
<div>
elements have the same width,
background color, border, and margins, but the first one also has 20 pixels of padding.
As Figure
6-2
shows, the white background of the first
<div>
element extends to the gray border and shows
through the padding. What's more, the overall width of the first
<div>
is 40 pixels greater than the second one
because the padding is added outside the content. The light yellow background of the page shows through the
margins of both
<div>
elements.
Figure 6-2.
Padding adds breathing space around the content inside an element
The styles in comparison.html look like this:
body {
background-color: #FFC;
color: #000;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#padded, #notpadded {
width: 300px;
background-color: #FFF;
