nocheinPoet: HTML5/CSS3 margin-top bug?

Beitrag lesen

SELF-Forum

HTML5/CSS3 margin-top bug?

nocheinPoet Homepage des Autors
– Informationen zu den Bewertungsregeln

Moin, hier hat sich ja einiges verändert, anmelden ist nicht mehr?

Auch egal, mir ist da etwas Seltsames aufgefallen, geht um den margin-top eines div das in einem anderen div liegt, dazu der Code:

<!DOCTYPE html>  
  
<html>  
  
	<head>  
  
		<meta charset="utf-8">  
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  
		<title></title>  
  
	</head>  
  
	<body>  
  
		<div style="background: #B2CCE6; height: 200px;">  
			<div style="background: #B2B2E6; margin-top: 50px">DIV 01</div>  
			<div style="background: #CCB2E6">DIV 02</div>  
		</div>  
  
	</body>  
  
</html>

Ich ging davon aus, den DIV 01 mit „margin-top: 50px“ im übergeordneten div nach unten schieben zu können, ist aber nicht der Fall, „margin-top: 50px“ verschiebt den übergeordneten div.

Gebe ich diesem nun ein Zeichen als Inhalt oder einen Border, wird wie gedacht mit dem margin nur „DIV 01“ im übergeordneten Container nach unten verschoben:

  
<div style="background: #B2CCE6; height: 200px;">  
	.  
	<div style="background: #B2B2E6; margin-top: 50px">DIV 01</div>  
	<div style="background: #CCB2E6">DIV 02</div>  
</div>

oder

  
<div style="background: #B2CCE6; height: 200px; border: 1px solid gray;">  
	<div style="background: #B2B2E6; margin-top: 50px">DIV 01</div>  
	<div style="background: #CCB2E6">DIV 02</div>  
</div>

FF 20 und IE 10 zeigen hier gleiches Verhalten, ich vermute darum mal, es soll so sein, weiß hier wer eine Erklärung dazu?

Mit Gruß

Manuel

Beitrag melden
–
Informationen zu den Bewertungsregeln