• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Divs schachteln - 1Div einmal leer, einmal mit Text

Z

Zejo

Mitglied
Hallo,

wenn ich 2Div Elemente schachtele und im ersten Div steht kein Text, und ich dem zweiten Div einen margin-top gebe, gehen beide divs nach unten.

Wenn ich hingegen ein Text hinzufüge, dann geht der Abstand nur von 2 Div runter.
Warum ist das so?

Bsp:
Code: 
<style type="text/css">
#a1 {
  background-color: #DC143C;
  height: 200px;

}
#a2 {
  background-color: #708090;
  margin-top: 50px;
  padding: 20px;
}

</style>
</head>

<body>
<div id="a1">
<div id="a2">Dies ist Absatz 2.</div>
</div>
</body>
 
Du mussst #a1 einen minimalen padding-top geben.
Code: 
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#box1 {
padding-top:1px;
background:#ddd;
min-height:200px;
}

#box2 {
margin-top:50px;
background:#dad;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">Text</div>
</div>

</body>
</html>

Nachtrag: Wenn du kein Padding nehmen möchtest, kannst du auch bpw. overflow:auto nehmen.
 
Zuletzt bearbeitet:
Danke für die Antworten. Es handelt sich tatsächlich um "Collapsing Margins".

Hat ein Element keinen vertikalen Rahmen oder padding, wird seine Höhe als Entfernung zischen den oberen und unteren Ränderecken seiner enthaltenden Kinder berechnet. Deswegen scheinen der obere und untere Rand des enthaltenden Kindes aus dem Elternelement herauszuragen.

Jedoch gibt es eine einfache Reparaturmöglichkeit. Fügt man dem Elternelement einen vertikalen Rahmen oder padding hinzu, kollabieren die Ränder nicht länger und die Höhe des Elements wird stattdessen als Entfernung zwischen dem oberen und unteren Rand seiner enthaltenden Kinder berechnet.
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben