Chapter 9: Spacing Out with Boxes 177
But if you add padding and a margin to the paragraph, you increase the para-
graph’s box’s width:<style>p {width: 100px; padding: 30px; margin: 40px;
background:tan;}</style></head><body><p>This paragraph is only 100px wide.</p></body>Notice that compared to Figure 9-9, the paragraph element shown in Figure
9-10 has a wider background color (because padding has been specified) and
is also positioned horizontally further away from the left side of the browser
(because a margin has been specified).Web page designers often mistakenly believe that when they provide a value
to the widthproperty of an element, they’re specifying the distance between
its left and right border lines. Or worse, some think their widthvalue speci-
fies the entire visible distance between the element and the next element. In
fact, padding, border widths, and margins must allbe taken into account.Figure 9-10:
Here, the
paragraph
has a larger
background
color block
and is
indented
from the left
of the
browser
window.