Head First HTML with CSS

ox width and height fine points
Q: If I don’t set the width of an
element, then where does the width come
from?
A: The default width for a block element
is “auto”, which means that it will expand to
fill whatever space is available. If you think
about any of the Web pages we’ve been
building, each block element can expand to
the entire width of the browser, and that’s
exactly what it does. Now, hold this thought,
because we’re going to go into this in detail
in the next chapter. Just remember that
“auto” allows the content to fill whatever
space is available (after taking padding,
border, and margin into account).
Sharpen your pencil
446 Chapter 11
there are no
Dumb Questions
Q: What if I don’t have any margin,
padding, or borders?
A: Then your content gets to use the
entire width of the box. If the width of the
content area is 300 pixels, and you have no
padding, border, or margin, then the width of
the entire box would also be 300 pixels.
Q: What are the different ways I can
specify widths?
A: You can specify an actual size
– usually in pixels – or you can specify a
percentage. If you use a percentage, then
the width is calculated as a percentage
of the width of container the element is in
Here’s a box that has all the widths labelled. What is the width of the entire box?
30 pixels
2 pixels
5 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.
200 pixels
10 pixels
2 pixels
20 pixels
(which could be the , a , etc.).
Q: What about the height?
A: In general, the height of an element
is left at the default, which is auto, and the
browser expands the content area vertically
so all of the content is visible. Take a look
at the elixirs section after we set the width
to 200 pixels and you’ll see the got a
lot taller.
You can explicitly set a height, but you
risk cutting off the bottom of your content
if your height isn’t big enough to contain
it. In general, leave your element heights
unspecified so they default to auto. We’re
going to talk about this more in the next
chapter as well.
Your answer here