Head First HTML with CSS

Well then how do we
specify the width of the
entire element?
You don’t. You specify the width of the content area,
the padding, the border, and the margin. All of that
added together is the width of the entire element.
Say you set the content area width to be 300 pixels using the width property
in a CSS rule.
And let’s say you’ve set the margins to 20 pixels, the padding to 10 pixels, and you
have a 1 pixel border. What’s the width of your element’s box? Well, it’s the width of
the content area added to the width of the left and right margins, the left and right
padding, and the left and right border width. Let’ see how to calculate that...
20 pixels
1 pixel
10 pixels
20 + 1 + 10
31
(1) The content area is 300 pixels.
300 pixels
Our guarantee: at the lounge, we’re
committed to providing you, our guest,
with an exceptional experience every
time you visit. Whether you’re just
stopping by to check in on email over
an elixir, or are here for an out-ofthe-ordinary
dinner, you’ll find our
knowledgeable service staff pay attention
to every detail. If you’re not fully satisfied
have a Blueberry Bliss Elixir on us.
300
31 + 31 = 62
10 pixels
1 pixel
20 pixels
10 + 1 + 20
31
divs and spans
(2) Figure out how much is taken up by
the margins, padding, and border.
(3) It looks like 62 pixels are taken up, so
add that to the content area’s width of
300 pixels, and we have 300 + 62 = 362
pixels for the entire box.
you are here 445