Margin zu Elternelement ohne Padding/Border

[mati]

Hallo,

wenn ich einem Kind-Element einen Margin gebe, gilt dieser dann auch zu den Außengrenzen des Vater-Elements hin?

Normalerweise dachte ich, es wäre immer so. Aber dieses Beispiel verhält sich in MSIE 8, Chrome und Opera 11 anders:

  
<h1>Beispiel 1:</h1>  
<div style="background-color:red">  
  <table style="background-color:blue; margin-top:100px"><tr><td>Test</td></tr></table>  
</div>  
  
<h1>Beispiel 2:</h1>  
<div style="background-color:red; border:1px solid black">  
  <table style="background-color:blue; margin-top:100px"><tr><td>Test</td></tr></table>  
</div>  

Demnach gilt der Abstand nur, wenn ich dem Vater einen Border oder ein Padding zuweise. Der Firefox verhält sich eher so, wie ich erwartet hätte. Da er der einzige Browser ist, verhält er sich aber wahrscheinlich falsch.

Könnt ihr mir da genaueres zu sagen (welcher Browser hat recht und warum)?

[MudGuard]

Hi,

wenn ich einem Kind-Element einen Margin gebe, gilt dieser dann auch zu den Außengrenzen des Vater-Elements hin?

Informiere Dich über collapsing margins.
cu,
Andreas

[suit]

wenn ich einem Kind-Element einen Margin gebe, gilt dieser dann auch zu den Außengrenzen des Vater-Elements hin?

Informiere Dich über collapsing margins.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

[mati]

Informiere Dich über collapsing margins.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Ah, vielen Dank euch beiden.

Hatte bisher immer nur von Border-Collapse bei aufeinander folgenden Elementen gewusst, nicht dass das auch bei ineinander verschachtelten Elementen passiert (wobei ich das etwas verwirrend finde, muss man höllisch aufpassen).