HTML and CSS Reference
Q: 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?
A: 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 total.
Q: Can inline elements really have margins?
A: They sure can, although you'll find that you often don't set the
margins of inline elements. 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
Q: What if I have one element nested inside another and they
both have margins? Can they collapse?
A: Yes, that can happen. Here's how to figure 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 first see it happen, so put it in the back of your
mind for when it occurs.
Q: So how exactly does text work as an inline element since
its content is not an element?
A: Even if text is content, the browser needs to flow it onto the
page, right? So the browser figures out how much text fits 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 refit
within the content area.
We've been through seven pages
of “flow.” When are you going to
explain that one little property we put
into our CSS file? You know, the
To understand float, you have to understand flow.
It might be one little property, but the way it works is closely tied to
how the browser flows elements and content onto the page. But hey,
you know that now, so we can explain float .
Here's the short answer: the float property first takes an element
and floats it as far left or right as it can (based on the value of float ).
It then flows all the content below it around the element. Of course
there are a few more details, so let's take a look…