Geko Box Model

Has the lizard stuffed it up?

[aspr1n]

Hi all,

It's late and I could be one "tag short of a valid page" but both IE 6 and Opera 6.04 agree with me, the box model on Gecko/20021111 Phoenix/0.4 is doing the old IE thing.

Here's the code, would appreciate if someone could check if it really should all line up:

<style type="text/css">
<!--
body {
background-color: #CCCC99;
}
.prod {
border: 1px solid #000000;
height: 160px;
width: 280px;
padding-left: 125px;
}
.prod_info{
height: 130px;
background-color: #CCCCCC;
}
.prod_nav{
background-color: #CCCC66;
height: 30px;
}
-->
</style>

<div class="prod">
<div class="prod_info">
<p>Text</p>
<p>More Text</p>
</div>
<div class="prod_nav">Nav Links</div>
</div>

Cheers,

asp

[moonbiter]

It's the margin on the paragraph elements that is screwing you up. Try

p { margin-top: 0; }

to see what I mean.

This has been called the "Escaping Margins" bug [joe.sameperson.net], but it's not entirely clear that it is a bug. Instead, it may simply be a result of the collapsing margins rule [w3.org]. According to Cascading Style Sheets: Designing for the Web [amazon.com] (pgs. 198-199):

The margins above and below elements are not simply added together to reach a total amount of space between the two elements. ... Instead, the browser discards the smaller margin and uses the larger margin to space apart two elements. This process is called collapsing margins. ...

The browser reacts similarly when two elements begin or end at the same time. ...

However, there's a twist to this collapsing of margins: margins collapse only if they touch each other. (Hakon Wium Lie and Bert Bos, 1999)

If you add a 1 px of padding to div.prod, you will see that the "Escaping Margin bug" goes away. This is because the margins of div.prod and the containing paragraphs no longer touch -- they are seperated by the padding. Thus, the larger default margin of the p element is no longer collapsed to apply to the div.prod that contains it.

How confusing is that?

<edited to add more information>

[aspr1n]

Moonbiter,

Thanks very much for the detail in your reply, and the p styles does fix it. I would appear to suggest there is some implied margin space, specificaly in <p> for there to be something to collapse, which I was casually aware of without understanding the implications.

You have to wonder why "features" such as this make it into specs like these, I can only see a useful reason for this in a very limited set of circumstances.

Thanks again,

asp