Der Rand des untergeordneten Elements verschiebt das übergeordnete Element

Ich habe ein div( Elternteil ), das ein anderes div( Kind ) enthält. Parent ist das erste Element bodyohne bestimmten CSS-Stil. Wenn ich setze

.child
{
    margin-top: 10px;
}

Das Endergebnis ist, dass die Oberseite meines Kindes immer noch mit dem Elternteil ausgerichtet ist. Anstatt das Kind um 10 Pixel nach unten zu verschieben, bewegt sich mein Elternteil um 10 Pixel nach unten.

Mein DOCTYPEist eingestellt auf XHTML Transitional.

Was fehlt mir hier?

Bearbeiten 1
Mein Elternteil muss streng definierte Abmessungen haben, da es einen Hintergrund hat, der von oben nach unten angezeigt werden muss (Pixel perfekt). Das Setzen vertikaler Ränder ist also ein No-Go .

edit 2
Dieses Verhalten ist bei FF, IE und CR gleich.

Bei untergeordneten Elementen mit Rändern innerhalb von DIVs wurde eine Alternative gefunden. Sie können auch Folgendes hinzufügen:

.parent { overflow: auto; }

oder:

.parent { overflow: hidden; }

Dies verhindert, dass die Ränder kollabieren . Rand und Polsterung machen dasselbe. Daher können Sie auch Folgendes verwenden, um einen Zusammenbruch am oberen Rand zu verhindern:

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

Update auf vielfachen Wunsch: Der springende Punkt beim Reduzieren von Rändern ist der Umgang mit Textinhalten. Zum Beispiel:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<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 reduziert, wird der Text wie erwartet angezeigt und die <div>Wrapper-Tags haben keinen Einfluss auf die Ränder. Jedes Element stellt sicher, dass es einen Abstand hat, aber der Abstand wird nicht verdoppelt. Die Ränder von <h2>und <p>summieren sich nicht, sondern gleiten ineinander (sie kollabieren). Gleiches gilt für das Element <p>und <ul>.

Leider kann diese Idee bei modernen Designs Sie beißen, wenn Sie ausdrücklich einen Container möchten. Dies wird in CSS Speak als neuer Blockformatierungskontext bezeichnet . Der overflowoder Rand Trick wird Ihnen das geben.

Dies ist normal (zumindest bei Browser-Implementierungen). Der Rand wirkt sich nicht auf die Position des Kindes in Bezug auf seinen Elternteil aus, es sei denn, der Elternteil verfügt über einen Abstand. In diesem Fall fügen die meisten Browser den Rand des Kindes zum Abstand des Elternteils hinzu.

Um das gewünschte Verhalten zu erzielen, benötigen Sie:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Obwohl alle Antworten das Problem beheben, kommen sie mit Kompromissen / Anpassungen / Kompromissen wie

• floats, Sie müssen Elemente schweben
• border-topDies drückt das übergeordnete Element mindestens 1 Pixel nach unten, was dann angepasst werden sollte, indem ein -1pxRand in das übergeordnete Element selbst eingefügt wird . Dies kann zu Problemen führen, wenn Eltern bereits margin-toprelative Einheiten haben.
• padding-top, der gleiche Effekt wie bei der Verwendung border-top
• overflow: hidden, Kann nicht verwendet werden, wenn Eltern überlaufende Inhalte anzeigen sollen, z. B. ein Dropdown-Menü
• overflow: auto, Führt Bildlaufleisten für übergeordnete Elemente ein, deren Inhalt (absichtlich) überläuft (z. B. Schatten oder das Dreieck der QuickInfo).

Das Problem kann mithilfe der folgenden CSS3-Pseudoelemente behoben werden

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

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

Stil display:inline-blockzum untergeordneten Element hinzufügen

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

Das hat bei mir funktioniert

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Ich finde heraus, dass innerhalb Ihrer .css>, wenn Sie die display-Eigenschaft eines div-Elements auf inline-block setzen , das Problem behoben wird. und die Marge wird wie erwartet funktionieren.

Ordentliche CSS-Lösung

Verwenden Sie den folgenden Code, um dem ungewollt bewegten div ein inhaltsloses erstes Kind 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 vorhandenen Elements nicht ändern müssen und daher nur minimale Auswirkungen auf das Design haben. Daneben ist das hinzugefügte Element ein Pseudoelement, das sich nicht im DOM-Baum befindet.

Die Unterstützung für Pseudoelemente ist weit verbreitet: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ und IE 8+. Dies funktioniert in jedem modernen Browser (seien Sie vorsichtig mit dem neueren ::before, der in IE8 nicht unterstützt wird).

Kontext

Wenn das erste untergeordnete Element eines Elements ein hat margin-top, passt das übergeordnete Element seine Position an, um redundante Ränder zu reduzieren. Warum? Es ist einfach so.

Angesichts des folgenden Problems:

<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 untergeordnetes Element mit Inhalten hinzufügen, z. B. einem einfachen Leerzeichen. Aber wir alle hassen es, Räume für ein reines Designproblem hinzuzufügen. Verwenden Sie daher die white-spaceEigenschaft, um Inhalte zu fälschen.

<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>

Wobei position: relative;die korrekte Positionierung des Fixes gewährleistet ist. Und white-space: pre;macht Sie keine Inhalte hinzufügen, die - wie ein weißer Raum - zu dem Update. Und height: 0px;width: 0px;overflow: hidden;stellt sicher, dass Sie das Update nie sehen werden.

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

Kurz gesagt, Sie können dies alles nur mit CSS tun (wodurch das Hinzufügen eines tatsächlichen untergeordneten Elements zum HTML-DOM-Baum entfällt):

<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>

Um "Div parent" zu verhindern, verwenden Sie den Rand von "div child":
Verwenden Sie im Parent diese CSS:

• Schweben
• Polsterung
• Rand
• Überlauf

Die darin marginenthaltenen Elemente .childkollabieren.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

In diesem Beispiel werden vom Browser Standardstile pempfangen margin. Die Standardeinstellung des Browsers font-sizeist normalerweise 16px. Wenn Sie einen margin-topWert von mehr als 16 Pixel haben #child, bemerken Sie, dass sich die Position bewegt.

Ich hatte auch dieses Problem, zog es jedoch vor, Hacks mit negativen Margen zu verhindern, also setzte ich ein

<div class="supercontainer"></div>

um alles herum, was Polster anstelle von Rändern hat. Natürlich bedeutet dies mehr Divitis, aber es ist wahrscheinlich der sauberste Weg, dies richtig zu machen.

Interessanterweise wird meine Lieblingslösung für dieses Problem hier noch nicht erwähnt: die Verwendung von Floats.

html:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

siehe hier: http://codepen.io/anon/pen/Iphol

Beachten Sie, dass für den Fall, dass Sie eine dynamische Höhe für das übergeordnete Element benötigen, diese ebenfalls schweben muss. Ersetzen Sie sie einfach height:100px;durchfloat:left;

Eine alternative Lösung, die ich gefunden habe, bevor ich die richtige Antwort wusste, war das Hinzufügen eines transparenten Rahmens zum übergeordneten Element.

Ihre Box verwendet jedoch zusätzliche Pixel ...

.parent {
    border:1px solid transparent;
}

Verwenden von topanstelle von margin-topist gegebenenfalls eine andere mögliche Lösung.