I have two DIVs, one after another, both with one or more P elements, with this code:
p {
margin: 0.9em 0;
}
.a, .b, .c, .d, .e, .f, .g, .h {
outline: 1px dashed red;
}
.a, .b {
margin: 0;
padding: 0 1em;
border: 1px solid black;
}
.c, .d {
margin: 0;
padding: 0 1em;
border: 0px solid black;
}
.e, .f {
margin: 0;
padding: 1px 1em;
border: 0px solid black;
}
.g {
margin: 0;
padding: 1px 1em 0;
border: 0px solid black;
}
.h {
margin: 0;
padding: 0 1em 1px;
border: 0px solid black;
}
If the border is not null, then everything works as expected.
If there is no border (no border rule or border: 0), then the DIVs shrink, ignoring the P margins (which, IMHO, are inside the DIV). It looks like the DIV take ownership of P margins. And even these (wrong?) margins do collapse.
If there is a non-zero vertical padding, then the bug goes away.
Both FireBird 0.7, Mozilla 1.6a and Opera 7.21 for Linux render the page the same way. Haven't tried in other browsers.
This is the div with class "a".
This div has class "b".
This is the div with class "c".
This div has class "d".
This is the div with class "e".
This div has class "f".
This div has class "h".
This div has class "h".
This is the div with class "g".
This is the div with class "g".
This div has class "h".
This div has class "h".
This is the div with class "a".
It doesn't matter how many P elements are inside the DIV.
This div has class "b".
It doesn't matter how many P elements are inside the DIV.
This is the div with class "c".
It doesn't matter how many P elements are inside the DIV.
This div has class "d".
It doesn't matter how many P elements are inside the DIV.
This div has class "e".
It doesn't matter how many P elements are inside the DIV.
This div has class "f".
It doesn't matter how many P elements are inside the DIV.
This div has class "g".
It doesn't matter how many P elements are inside the DIV.
This div has class "h".
It doesn't matter how many P elements are inside the DIV.