margin: Jetzt erst die Frage

[wahsaga]

hi,

Ist dieses:

<cite collapsing margins>
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
</cite>

der Grund dafür?

Nein, etwas weiter unten:

"The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."

Dein Div um P herum hat _kein_ border-top, _kein_ padding-top, und das P kein "Clearing" - also haben wir ein "adjoining" margin, wo ich adjoin hier mal mit "hinzufügen" übersetzen möchte - das margin-top, welches du eigentlich für P haben wolltest, wird zum margin-top des Div (0) hinzugefügt - und damit wandert der Div als ganzes nach unten.

Eine andere Frage habe ich, ich schätze, es hat auch damit zu tun, betrifft allerdings nur Opera (8 und 9):

Das DIV "content" soll kein Anzeichen von akuter Divitis darstellen, es ist ja für moderne Browsern überflüssig, nur brauch ich es für einen IE 6 - Workaround. Das DIV "main" ist wie folgt formatiert:

div#main {
background-color : #F1FBFF;
margin-left : 15%;
margin-right : 15%;
margin-top : 65px;
margin-bottom : 65px;
padding : 5px;
border : 5px solid #A5CEFF;
}

IEs und FF zeigen den mit margin-bottom gewünschten 65px Abstand zum unteren Rand des DIV "content", der am Ende des Viewports abschließt. Beide Operas nicht, bis ich ein nicht inhaltsleeres Element dazwischen schiebe. Wo jetzt schrauben? ;)

Selbe Baustelle, andersherum:

"The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border."

Schauen wir uns die "Bedingungen" der Reihe nach an (davon ausgehend, das #content keine weiteren Formatierungen hat, die du uns nicht genannt hast):

• height von #content ist auto
• Default für min-height ist 0, damit kleiner als die "used height", also die wirkliche Höhe von #content
• Default für max-height ist none, was ich als "unendlich" ansehen möchte - also ist die größer als die "used height" von #content
• #content hat kein border-bottom, kein padding-bottom

Damit sind also alle Bedingungen erfüllt, dass zum margin-bottom von #content (0) das margin-bottom seines letzten, im Fluss befindlichen Kindelementes - also #main - wiederum "hinzugefügt" wird:
#content muss sich also in seiner Gänze um 65px "von unten" absetzen, #main hält damit keinen margin mehr zum Ende von #content ein.

Mögen mich die anderen Spec-Schnüffler des Forums korrigieren, wenn ich etwas übersehen haben sollte - aber m.E. liegt Opera hier richtig, und der Firefox macht es überraschenderweise so falsch, wie man es vom IE sowieso erwarten durfte.

gruß,
wahsaga