Rand am untergeordneten Element verschiebt übergeordnetes Element

Question

Rand am untergeordneten Element verschiebt übergeordnetes Element

Gefragt el 19 de November, 2009: Wann wurde die Frage gestellt
203945 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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.

Gefragt el 19 de November, 2009 von Robert Koritnik

0 Stimmen

Auf mehreren Browsern oder nur auf einem bestimmten?

Kommentiert el 19 de November, 2009 von o.k.w

255 Stimmen

Dieses Verhalten macht überhaupt keinen Sinn. Der Rand soll innerhalb des Elternteils bleiben. Er darf das Elternteil nicht verschieben. Wer schreibt diese Regeln.

Kommentiert el 14 de Marsch, 2013 von Muhammad Umer

21 Stimmen

+2 für letzten Kommentar. ernsthaft diese Regel nervt mich. "In 60 % der Fälle funktioniert es jedes Mal" - das ist eine Marge.

Kommentiert el 11 de Marsch, 2014 von Casey Dwayne

Anzeigen 6 weitere Kommentare

Answer 1

5 Antworten

Answer 2

1voto

Zyl Punkte 2172

Ich hatte dieses Problem auch, wollte aber lieber verhindern, dass negative Margen gehackt werden, also habe ich eine

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

um das Ganze herum, das anstelle von Rändern Abstände hat. Natürlich bedeutet dies mehr divitis, aber es ist wahrscheinlich der sauberste Weg, um dies zu tun, um richtig getan.

Beantwortet el 7 de April, 2013 von Zyl (2172 Punkte )

Answer 3

1voto

schellmax Punkte 5344

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

sehen Sie es hier: http://codepen.io/anon/pen/Iphol

beachten Sie, dass für den Fall, dass Sie dynamische Höhe auf dem Elternteil benötigen, muss es auch zu schweben, so ersetzen Sie einfach height:100px; von float:left;

Beantwortet el 14 de Juli, 2014 von schellmax (5344 Punkte )

Answer 4

1voto

lamplightdev Punkte 1961

Verwendung von top anstelle von margin-top ist eine weitere mögliche Lösung, wenn sie angemessen ist.

Beantwortet el 20 de November, 2014 von lamplightdev (1961 Punkte )

Answer 5

1voto

SandRock Punkte 5192

Eine alternative Lösung, die ich fand, bevor ich die richtige Antwort kannte, war das Hinzufügen einer transparenter Rahmen auf das übergeordnete Element.

Ihre Box wird allerdings zusätzliche Pixel benötigen...

.parent {
    border:1px solid transparent;
}

Beantwortet el 8 de Januar, 2015 von SandRock (5192 Punkte )

Answer 6

0voto

25thhour Punkte 11

El margin der darin enthaltenen Elemente .child kollabieren.

<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, p erhält eine margin aus den Standardstilen des Browsers. Browser-Standard font-size beträgt in der Regel 16px. Mit einer margin-top von mehr als 16px auf #child merkt man, dass sich seine Position verändert.

Beantwortet el 19 de November, 2009 von 25thhour (11 Punkte )

Rand am untergeordneten Element verschiebt übergeordnetes Element

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Rand am untergeordneten Element verschiebt übergeordnetes Element

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: