Rand am untergeordneten Element verschiebt übergeordnetes Element

Question

Ich habe eine div ( Elternteil ), die eine andere div ( Kind ). Parent ist das erste Element in body ohne besonderen CSS-Stil. Wenn ich setze

.child
{
    margin-top: 10px;
}

Das Endergebnis ist, dass der obere Teil meines Kindes immer noch auf die Eltern ausgerichtet ist. Anstatt Kind für 10px nach unten verschoben wird, bewegt sich mein Elternteil 10px nach unten.

Meine DOCTYPE wird eingestellt auf XHTML Transitional .

Was übersehe ich hier?

bearbeiten 1
Mein übergeordnetes Element muss streng definierte Abmessungen haben, da es einen Hintergrund hat, der von oben bis unten (pixelgenau) darunter angezeigt werden muss. Daher ist das Festlegen von vertikalen Rändern für ihn geht nicht .

bearbeiten 2
Dieses Verhalten ist sowohl bei FF, IE als auch bei CR gleich.

Answer 1

Eine Alternative finden Sie unter Untergeordnete Elemente mit Rändern innerhalb von DIVs Sie können auch hinzufügen:

.parent { overflow: auto; }

oder:

.parent { overflow: hidden; }

Dies verhindert, dass die Ränder zu zusammenbrechen . Umrandung und Auffüllung tun dasselbe. Daher können Sie auch Folgendes verwenden, um einen Zusammenbruch des oberen Randes zu verhindern:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 Update: wenn Sie bereit sind Verzicht auf IE11-Unterstützung können Sie auch das neue CSS-Konstrukt verwenden display: flow-root . Siehe MDN-Webdokumente für alle Einzelheiten zu den Kontexten der Blockformatierung.

---

Update auf vielfachen Wunsch: Der Sinn des Kollabierens von Rändern ist der Umgang mit Textinhalten. Zum Beispiel:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Da der Browser die Ränder kollabiert, würde der Text so erscheinen, wie Sie es erwarten würden, und die <div> Wrapper-Tags haben keinen Einfluss auf die Ränder. Jedes Element hat einen Abstand um sich herum, aber die Abstände werden nicht verdoppelt. Die Ränder der <h2> y <p> addieren sich nicht, sondern gleiten ineinander (sie fallen in sich zusammen). Das Gleiche gilt für die <p> y <ul> Element.

Leider kann diese Idee bei modernen Entwürfen ins Auge gehen, wenn man ausdrücklich einen Container will. Dies wird als neue Blockformatierungskontext in CSS-Sprache. Die overflow oder Margen-Trick wird Ihnen das geben.

Answer 2

Dies ist ein normales Verhalten (zumindest bei Browser-Implementierungen). Der Rand hat keinen Einfluss auf die Position des untergeordneten Elements im Verhältnis zu seinem übergeordneten Element, es sei denn, das übergeordnete Element verfügt über ein Padding, in diesem Fall fügen die meisten Browser den Rand des untergeordneten Elements zum Padding des übergeordneten Elements hinzu.

Um das gewünschte Verhalten zu erreichen, müssen Sie:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Answer 3

Alle Antworten beheben das Problem, aber sie bringen Kompromisse/Anpassungen/Kompromisse mit sich, wie

• floats , Sie haben zu schwebenden Elementen
• border-top Dadurch wird das übergeordnete Element um mindestens 1 px nach unten verschoben, was dann mit dem Einfügen von angepasst werden sollte. -1px Rand zum übergeordneten Element selbst. Dies kann zu Problemen führen, wenn das übergeordnete Element bereits über margin-top in relativen Einheiten.
• padding-top , gleiche Wirkung wie bei der Verwendung von border-top
• overflow: hidden Kann nicht verwendet werden, wenn ein übergeordnetes Element überlaufenden Inhalt anzeigen soll, wie z. B. ein Dropdown-Menü.
• overflow: auto Führt Bildlaufleisten für übergeordnete Elemente ein, die (absichtlich) ausufernden Inhalt haben (wie Schatten oder das Dreieck eines Tooltips)

Das Problem kann durch die Verwendung von CSS3-Pseudoelementen wie folgt behoben werden

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

Answer 4

Stil hinzufügen display:inline-block zum untergeordneten Element

Answer 5

Das übergeordnete Element darf nicht leer sein, zumindest muss es   vor dem untergeordneten Element.