HTML and CSS Reference
In-Depth Information
A closer look at the box model
You're going to be able to control every aspect of the box with
CSS: the size of the padding around the content, whether or not
the element has a border (as well as what kind and how large),
and how much margin there is between your element and other
elements. Let's check out each part of the box and its role:
The content area holds the element's
content. It's typically just big enough
to hold the content.
What is the
content area
?
Every element starts with some
content, like text or an image,
and this content is placed inside
a box that is just big enough
to contain it. Notice that the
content area has no whitespace
between the content and the
edge of this 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.
We've dra
wn an edg
e
around th
e content
area just
so you kn
ow
how big it
is. But i
n a
browser,
there is n
ever
a visible e
dge aroun
d
the conte
nt area.
The browser adds optional pad
ding around
the content area.
What is the
padding
?
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.
Any box can have a layer of padding
around the content area. Padding is
optional, so you don't have to have it,
but you can use padding to create visual
whitespace between the content and
the border of the box. The padding
is transparent and has no color or
decoration of its own.
