HTML and CSS Reference
In-Depth Information
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).
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 the container the element is in
(which could be the <body>, a <div>, 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 <div> got a
lot taller.
You can explicitly set a height, but you risk
having the bottom of your content overflow
into other elements if your height isn't big
enough to contain it. In general, leave your
element heights unspecified so they default
to auto.
Here's a box that has all the widths labeled. What is the width of the entire box?
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-of-
the-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.
