it-swarm.com.de

Margin-Top Drücken Sie das äußere Div nach unten

Ich habe ein Header-Div als erstes Element in meinem Wrapper-Div, aber wenn ich einen h1 innerhalb des Header-Div hinzufügen, wird der gesamte Header-Div nach unten verschoben. Mir ist klar, dass dies passiert, wenn ich einen oberen Rand auf das erste sichtbare Element einer Seite anbringe. 

Hier ist ein Beispielcode-Ausschnitt. Vielen Dank!

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}
<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

118
Danny

overflow:auto in die übergeordnete div setzen
sehen Sie mehr in diesem Link

176
JuanPablo

Ich habe keine genaue Erklärung, warum dies geschieht, aber ich habe das Problem behoben, indem Sie top-margin in top-padding geändert oder display: inline-block zum Elementstil hinzugefügt haben.

EDIT: Das ist meine Theorie

Ich habe das Gefühl, dass es etwas damit zu tun hat, wie die Margen zusammenfallen.

von W3C Collapsing Margins :

In dieser Spezifikation ist der Ausdruck Zusammenfallende Ränder bedeuten, dass angrenzende Ränder (kein nicht leerer Inhalt, Abstand oder Randbereiche oder Abstand trennen) von zwei oder Mehrere Kästchen (die neben einem anderen oder verschachtelt sein können) bilden zusammen ein einfacher Rand.

Meine Theorie ist, dass, da sich Ihr erstes Element neben dem Körper befindet, die beiden Ränder kombiniert werden und auf den Körper angewendet werden: Dies zwingt den Inhalt des Körpers, unter dem angewendeten zusammengelegten Rand in Übereinstimmung mit dem Box-Modell zu beginnen.

Es gibt Situationen, in denen die Margen nicht zusammenbrechen, was sich vielleicht mit (von Collapsing Margins ) herumspielen lohnt:

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element
31
digitaldreamer

Auf diese Weise können Sie verhindern, dass der Rand zwischen übergeordneten und untergeordneten Elementen zusammenbricht. Verwenden Sie diejenige, die besser zum Rest Ihres Stylings passt:

  • Setzen Sie display auf einen anderen Wert als block.
  • Setzen Sie float auf einen anderen Wert als none.
  • Entfernen Sie den Rand und verwenden Sie stattdessen padding. Wenn Sie beispielsweise margin-top: 10px hatten, ersetzen Sie es mit padding-top: 10px;.
  • Entfernen Sie den Rand und verwenden Sie stattdessen position (absolute oder relative) mit den Attributen top, bottom usw. Wenn Sie beispielsweise margin-top: 10px hätten, ersetzen Sie position: relative; top: 10px;.
  • Fügen Sie dem parent -Element eine padding oder eine border an der Seite hinzu, an der die Ränder zusammenfallen. Die Grenze kann 1px und transparent sein.
  • Setzen Sie overflow auf eine andere als visible für das parent -Element.
14
Jesús Carrera

Ich weiß, dass dies ein altes Problem ist, ich bin es oft begegnet. Das Problem ist, dass alle Korrekturen hier Hacks sind, die möglicherweise unbeabsichtigte Konsequenzen haben.

Zunächst gibt es eine einfache Erklärung für das Grundproblem. Wenn das erste Element in einem Container einen oberen Rand aufweist, wird dieser obere Rand aufgrund der Art und Weise, in der der Rand reduziert wird, effektiv auf den übergeordneten Container selbst angewendet. Sie können dies auf eigene Faust testen, indem Sie folgende Schritte ausführen:

<div>
    <h1>Test</h1>
</div>

Öffnen Sie dies in einem Debugger und schweben Sie über dem div. Sie werden feststellen, dass das div selbst tatsächlich dort platziert ist, wo der obere Rand des H1-Elements steht stoppt. Dieses Verhalten ist vom Browser beabsichtigt.

Es gibt also eine einfache Lösung, ohne auf seltsame Hacks zurückgreifen zu müssen, wie es die meisten Posts hier tun (keine Beleidigungen beabsichtigt, es ist nur die Wahrheit) - kehren Sie einfach zur ursprünglichen Erklärung zurück - ...if the first element inside a container has a top margin... - Danach müsste also das erste Element in einem Container NICHT einen oberen Rand haben. Okay, aber wie machen Sie das, ohne Elemente hinzuzufügen, die Ihr Dokument nicht semantisch stören?

Einfach! Pseudo-Elemente! Sie können dies über eine Klasse oder ein vordefiniertes Mixin tun. Füge hinzu ein :before Pseudoelement:

CSS über eine Klasse:

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

Wenn Sie dem obigen Markup-Beispiel folgen, würden Sie Ihren Div als solchen ändern:

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

Warum funktioniert das?

Wenn das erste Element in einem Container keinen oberen Rand hat, wird die Position des Anfangs des oberen Randes des nächsten Elements festgelegt. Durch Hinzufügen eines :before Pseudo-Element, der Browser fügt tatsächlich ein nicht-semantisches (mit anderen Worten, gut für SEO) Element in den übergeordneten Container ein vor Ihr erstes Element.

Q. Warum die Höhe: .0000001em?

A. Der Browser benötigt eine Höhe, um das Randelement nach unten zu drücken. Diese Höhe ist praktisch Null, aber Sie können trotzdem dem übergeordneten Container selbst Auffüllungen hinzufügen. Da es praktisch null ist, hat es auch keine Auswirkungen auf das Layout des Containers. Schön.

Jetzt können Sie eine Klasse (oder besser, in SASS/LESS, ein Mixin!) Hinzufügen, um dieses Problem zu beheben, anstatt seltsame Darstellungsstile hinzuzufügen, die unerwartete Konsequenzen haben, wenn Sie andere Dinge mit Ihren Elementen tun und gezielt Ränder an Elementen beseitigen möchten und/oder Ersetzen durch Auffüllen oder seltsame Positions-/Gleitkommastile, die dieses Problem wirklich nicht lösen sollen.

4
dudewad

display: flex wird in diesem Fall funktionieren. Geben Sie das übergeordnete Element display: flex; an und geben Sie dem h1-Tag entsprechend Ihrer Anforderung einen Rand ein. 

2
Bijay

Laufen Sie heute in diese Ausgabe.

overflow: hidden funktionierte nicht wie erwartet, als mir weitere Elemente folgten.

Also habe ich versucht, die Anzeigeeigenschaft des übergeordneten div zu ändern unddisplay: flexfunktioniert !!!

Hoffe das kann jemandem helfen. :)

0
Libin

Dies geschieht aufgrund des Randabbruchs ..__ Wenn ein untergeordnetes Element die Begrenzung des übergeordneten Elements berührt und eines davon mit Rändern angewendet wird, geschieht Folgendes:

  1. Die größte Marge gewinnt (angewendet).

  2. wenn einer von ihnen eine Marge hat, teilen sich beide dasselbe.

Lösungen

  1. rand auf Eltern anwenden, wodurch Eltern und Kinder getrennt werden.
  2. wende das Auffüllen auf übergeordnete Elemente an, wodurch Eltern und Kind getrennt werden.
  3. Übernehmen Sie den Überlauf und nicht sichtbar auf dem übergeordneten Element.
  4. vorher oder Nachher verwenden, um ein virtuelles Element in übergeordneten Divisionen zu erstellen.
  5. erstellen Sie ein HTML-Element zwischen dem angewendeten Rand und dem übergeordneten Rand, um sie zu trennen.
0
Ishu

Das Hinzufügen eines winzigen Füllungsbereichs zum übergeordneten Element kann dieses Problem beheben.

.parent{
  padding-top: 0.01em;
}

Dies ist nützlich, wenn ein Element innerhalb des übergeordneten Elements außerhalb des übergeordneten Elements sichtbar sein soll, z.

0
adamspruijt