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

Das hat bei mir funktioniert

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Answer 2

Um "Div parent" zu verhindern, verwenden Sie margin of "div child":
Im Elternteil verwenden diese css:

• Schwimmer
• Polsterung
• Grenze
• Überlauf

Answer 3

Ordentliche Lösung nur für CSS

Verwenden Sie den folgenden Code, um dem ungewollt verschobenen div ein inhaltsloses first-child voranzustellen:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

Der Vorteil dieser Methode besteht darin, dass Sie das CSS eines bestehenden Elements nicht ändern müssen und daher nur minimale Auswirkungen auf das Design haben. Außerdem ist das hinzugefügte Element ein Pseudo-Element, das no im DOM-Baum.

Die Unterstützung für Pseudo-Elemente ist weit verbreitet: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, und IE 8+. Dies funktioniert in jedem modernen Browser (Vorsicht bei den neueren ::before , die im IE8 nicht unterstützt wird).

Kontext

Wenn das erste Kind eines Elements eine margin-top passt das übergeordnete Element seine Position an, um überflüssige Ränder zu kürzen. Und warum? Weil es einfach so ist.

Gegeben sei das folgende Problem:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Sie können das Problem beheben, indem Sie ein Kind mit Inhalt hinzufügen, z. B. ein einfaches Leerzeichen. Aber wir alle hassen es, Leerzeichen hinzuzufügen, wenn es sich um ein reines Designproblem handelt. Verwenden Sie daher die white-space Eigenschaft zum gefälschten Inhalt.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Wo position: relative; sorgt für eine korrekte Positionierung der Befestigung. Und white-space: pre; macht es möglich, dass Sie keinen Inhalt - wie z. B. einen Leerraum - in die Korrektur einfügen müssen. Und height: 0px;width: 0px;overflow: hidden; stellt sicher, dass Sie die Korrektur nie sehen werden.

Sie müssen möglicherweise Folgendes hinzufügen line-height: 0px; o max-height: 0px; um sicherzustellen, dass die Höhe in alten IE-Browsern tatsächlich Null ist (ich bin mir nicht sicher). Und optional können Sie hinzufügen <!--dummy--> in alten IE-Browsern, wenn es nicht funktioniert.

Kurz gesagt, Sie können all dies nur mit CSS tun (was die Notwendigkeit beseitigt, ein tatsächliches Kind zum HTML-DOM-Baum hinzuzufügen):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Answer 4

Spiel mit der Anzeige des Elternteils

.parent{
     display: inline-block;
     width: 100%;
}

ou

.parent{ display: flex; }

Answer 5

Das habe ich herausgefunden, innerhalb Ihrer .css >wenn Sie die Anzeigeeigenschaft eines div-Elements zu inline-block behebt das Problem, und die Marge funktioniert wie erwartet.