So if I have a block element with a
zero margin, and a block element below
it with a top margin of 20, the margin
between them would end up being 20?
Right. If one of the margins is bigger,
then the margin becomes the larger of the
two, even if one margin is zero. But if the
margins are the same, say, 10 pixels, then
they just get collapsed together to 10 pixels
Can inline elements really have
They sure can, although you won’t
ﬁnd that you set the margins of inline
elements often. The one exception is
images. It is very common to not only set
margins but also borders and padding on
images. And while we aren’t going to be
setting any inline element margins in this
chapter, we will be setting the border on one
a little later.
What if I have one element nested
inside another and they both have
margins? Can they collapse?
Yes, that can happen. Here’s how
to ﬁgure out when they will: whenever you
have two vertical margins touching, they
will collapse, even if one element is nested
inside the other. Notice that if the outer
element has a border, the margins will
never touch, so they won’t collapse. But
if you remove the border, they will. This is
sometimes puzzling when you ﬁrst see it
happen, so put it in the back of your mind for
when it occurs.
So how exactly does text work as
an inline element since its content is not
Even if text is content, the browser
needs to ﬂow it onto the page, right? So the
browser ﬁgures out how much text ﬁts on a
given line, and then treats that line of text
as if it were an inline element. The browser
even creates a little box around it. As you’ve
seen, if you resize the page, then all those
blocks may change as the text is reﬁt within
the content area.
there are no
We’ve been through seven
pages of “ﬂow.” When are you going to
explain that one little property we put
into our CSS ﬁle? You know, the
It might be one little property, but the way it works is closely tied
to how the browser ﬂows elements and content onto the page.
But hey, you know that now, so we can explain ﬂoat.
Here’s the short answer: the ﬂoat property ﬁrst takes an element
and ﬂoats it as far left or right as it can (based on the value of
ﬂoat). It then ﬂows all the content below it around the element.
Of course there’s a few more details, so let’s take a look...
To understand ﬂoat, you have
to understand ﬂow.