HTML and CSS Reference
In-Depth Information
Q:
It seems like knowing this box
stuff would be important if I were
someone creating the software for a
web browser, but how is this going to
help me make better web pages?
A:
To go beyond simple web pages
that use the browser's default layout,
you need to be able to control how
elements sit on the page, as well as the
relative position of other elements. To do
that, you alter various aspects of each
element's padding and margins. So to
create interesting web page designs,
you definitely need to know something
about the box model.
Q:
What's the difference between
padding and margin? They seem like
the same thing.
A:
The margin provides space
between your element and other
elements, while padding gives you extra
space around your content. If you have
a visual border, the padding is on the
inside of the border and the margin on
the outside. Think of padding as part of
the element, while the margin surrounds
your element and buffers it from the
things around it.
Q:
I know they are all optional, but
do you need to have padding to have
a border or a margin?
A:
No, they are all totally optional
and don't rely on each other. So you
can have a border and no padding, or a
margin and no border, and so on.
Q:
I'm not sure I get how elements
get laid out and how margins fit into
that.
A:
Hold that thought. While you're
going to see a little of how margins
interact with other elements in this
chapter, we'll get way into this topic
in Chapter 11 when we talk about
positioning.
Q:
So other than size, it sounds
like I can't really style padding and
margins?
A:
That's basically right. Both are
used to provide more visual space, and
you can't give the padding or margin a
direct color or any kind of decoration.
But because they are transparent, they
will take on the color of any background
colors or background images. One
difference between padding and margins
is that the element's background color
(or background image) will extend under
the padding, but not the margin. You'll
see how this works in a bit.
Q:
Is the size of the content area
determined solely by the size of the
content in it?
A:
Browsers use several rules to
determine the width and height of the
content area, and we'll be looking at that
more in-depth later. The short answer is
that while the content is the primary way
the size of an element is determined,
you can set the width and height
yourself if you need control over the size
of the element.
Hey guys, love the shop talk,
really do. But did you forget
you were in the middle of
renovating the lounge?
