margin-problem beim firefox und opera

[Kropff]

kann mir mal einer folgendes erklären?

<div class="grau" style="margin-top:20px;border-top:1px solid #000; background:#dadada;">
  <div class="weiss" style="margin-top:20px; border-top:1px solid #f00;">
    <div class="lila" style="margin-top:20px; border-top:1px solid #00f;">test</div>
  </div>
</div>
<div class="grau" style="margin-top:20px; background:#dadada;">
  <div class="weiss" style="margin-top:20px;">
    <div class="lila" style="margin-top:20px;">test</div>
  </div>
</div><br />
<div class="grau" style="padding-top:20px; background:#dadada;">
  <div class="weiss" style="padding-top:20px;">
    <div class="lila" style="padding-top:20px;">test</div>
  </div>
</div> 

warum wird beim mittleren teil nur ein einmaliges margin von 20px gesetzt?

gruß
peter

[tontechniker]

margin wird etwas anders ausgewertet als padding - selfhtml schreibt zum Beispiel folgendes:

Wenn das Vorgänger- oder Elternelement eine Angabe zu nach unten margin-bottom hat, gilt nur eine der beiden Angaben für den Gesamtabstand zwischen den beiden Elementen, und zwar diejenige, die den größten Abstand definiert. Wenn also ein erster Textabsatz margin-bottom:10px hat und ein folgender Textabsatz margin-top:15px, dann wird der Abstand zwischen beiden Absätzen auf 15px berechnet. Wenn eine der beiden Gegen-Angaben negativ ist, wird der tatsächliche Abstand zwischen den beiden Elementen aus dem Wert der positiven abzüglich der negativen Angabe berechnet.

Da die Elemente bei dir leer sind wird für sie keine Höhe berechnet und damit auch kein Abstand. Wenn du die Container mit Inhalt füllst (  zum Beispiel) funktioniert es wieder so wie erwartet. Das ist übrigens beabsichtigt:

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

Vertical margins may collapse between certain boxes:
* Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
* Vertical margins between a floated box and any other box do not collapse.
* Margins of absolutely and relatively positioned boxes do not collapse.

[Kropff]

man lernt nie aus.

danke
peter