Head First HTML with CSS

more about box widths
444 Chapter 11
I was wondering how the
width property relates to padding
and margins. Is this the width of the
content itself? Or the entire box
including the padding and margin?
The width property specifies the
width for the content area only.
To figure out the width of the entire box, you
need to add the width of the content area to the
width of the left and right margins, the left and
right padding, and the border width. Don’t forget
that you have to include twice the border width,
because there is a border on the left and the right.
left margin width
border width
left padding width
total width
width
(specified
in width
property)
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.
right padding width
border width
right margin width