nicht angemeldet
HTML5/CSS3 margin-top bug?
0 
MudGuard
0 
Matthias Apsel
0 
Der Martin
0
HTML5/CSS3 margin-top bug?
Gunnar BittersmannMoin, 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
-
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.
natürlich - so sind collapsing margins definiert.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Om nah hoo pez nyeetz, nocheinPoet!
Moin, hier hat sich ja einiges verändert, anmelden ist nicht mehr?
Wenn du magst, wie früher "benutzerspezifische Ansicht"
FF 20 und IE 10 zeigen hier gleiches Verhalten, ich vermute darum mal, es soll so sein, weiß hier wer eine Erklärung dazu?
Das ist kein Fehler sondern gewünschtes Verhalten. Es gibt im Archiv eine Reihe bildhafter Diskussionen über collapsing margins, zusätzliche Suchbegriffe könnten etwa Labor oder Voyager oder Janeway sein.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
zusätzliche Suchbegriffe könnten etwa Labor oder Voyager oder Janeway sein.
Ich so gedacht: Voyager, WTF? Dann gesehen, dass ich’s ja selber war.
Gut, dass man das Archiv als erweitertes Gedächtnis hat.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Hallo,
Moin, hier hat sich ja einiges verändert, anmelden ist nicht mehr?
war noch nie ... jedenfalls nicht Pflicht. Wer's möchte, kann es immer noch tun, daran hat sich nichts geändert.
Auch egal, mir ist da etwas Seltsames aufgefallen, geht um den margin-top eines div das in einem anderen div liegt
Lass mich raten: Du bist dem Phänomen der Collapsing Margins auf den Leim gegangen? - Margins von Elementen, die Kante an Kante liegen, verschmelzen miteinander, so dass nur noch der größere der beiden Margins wirkt. Und zwar sowohl bei aufeinanderfolgenden Elementen, dann fällt margin-bottom des oberen mit margin-top des folgenden Elements zusammen, als auch bei verschachtelten Elementen, dann fallen beispielsweise die margin-top beider Elemente zusammen.
Vermeiden kann man das zum Beispiel, indem man einem der beiden Elemente noch ein border gibt (und sei es transparent), oder indem man von margin auf padding ausweicht, was aber nicht immer möglich ist.
FF 20 und IE 10 zeigen hier gleiches Verhalten, ich vermute darum mal, es soll so sein
Ja, und das ist schon lange so, nicht erst seit CSS3. Ich hatte auch noch nie einen Fall, wo ich das als sinnvoll empfunden hätte, sondern versuche immer, den Effekt zu vermeiden.
Ciao,
Martin--
Die letzten Worte des Architekten:
Mir fällt da gerade was ein...
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Mensch das ging ja schnell, danke an Euch für die Antworten.
Ja sinnvoll finde ich das Verhalten nun nicht, aber nun weiß ich, es soll so sein und hat sogar einen Namen.
Habe mir ja schon fast so etwas gedacht.
Halte es aber dennoch für Unsinn, wenn ich einen Margin in einem Container angebe, dann soll der auch für diesen gelten und nicht den übergeordneten mitziehen, wenn es da keinen Content drin gibt.
Was sich da wer auch immer mal bei gedacht hat. :D
Gruß
Manuel
-
Om nah hoo pez nyeetz, nocheinPoet!
Was sich da wer auch immer mal bei gedacht hat. :D
Matthias
--
1/z ist kein Blatt Papier.
-