Gibt es eine Möglichkeit, das Zusammenfallen von Rändern insgesamt zu deaktivieren? Die einzigen Lösungen, die ich gefunden habe (unter dem Namen "Uncollapsing"), sind die Verwendung eines 1-Pixel-Rahmens oder einer 1-Pixel-Polsterung. Ich finde das inakzeptabel: Das fremde Pixel erschwert die Berechnungen ohne guten Grund. Gibt es eine vernünftigere Möglichkeit, diesen Margin-Collapse zu deaktivieren?
202
margin-bottom
aber lassen Sie ihnmargin-top
als 0.Antworten:
Es gibt zwei Haupttypen des Randkollapses:
Die Verwendung einer Polsterung oder eines Randes verhindert nur im letzteren Fall ein Zusammenfallen. Außerdem verhindert jeder Wert, der
overflow
von seinemvisible
auf das übergeordnete Element angewendeten Wert ( ) abweicht, das Zusammenfallen. Somit haben beideoverflow: auto
undoverflow: hidden
den gleichen Effekt. Möglicherweise ist der einzige Unterschied bei der Verwendunghidden
die unbeabsichtigte Folge des Ausblendens von Inhalten, wenn der Elternteil eine feste Höhe hat.Andere Eigenschaften, die nach dem Anwenden auf das übergeordnete Element zur Behebung dieses Verhaltens beitragen können, sind:
float: left / right
position: absolute
display: inline-block / flex
Sie können alle hier testen: http://jsfiddle.net/XB9wX/1/ .
Ich sollte hinzufügen, dass Internet Explorer wie üblich die Ausnahme ist. Insbesondere werden in IE 7 Ränder nicht reduziert, wenn für das übergeordnete Element ein Layout angegeben wird, z
width
.Quellen: Sitepoints Artikel Collapsing Margins
quelle
overflow: auto
dazu führen kann, dass Bildlaufleisten im übergeordneten Element angezeigt werden, anstatt dass der Inhalt überläuftoverflow: visible
.flex
andere Wert als der Standardwert deaktiviert auch den RandkollapsSie können hierfür auch den guten alten Micro Clearfix verwenden.
Siehe aktualisierte Geige: http://jsfiddle.net/XB9wX/97/
quelle
:before
und:after
Elementen zu füllen . Ich habe diese Regel jetzt zu meinem Stylesheet hinzugefügt :div:before, div:after{content: ' '; display: table;}
. Fantastisch. Plötzlich verhält sich das Zeug wie erwartet.Ein guter Trick, um das Zusammenfallen von Rändern zu deaktivieren, der meines Wissens keine visuellen Auswirkungen hat, besteht darin, die Polsterung des übergeordneten Elements auf Folgendes einzustellen
0.05px
:Die Polsterung ist nicht mehr 0, so dass kein Kollabieren mehr auftritt, aber gleichzeitig ist die Polsterung klein genug, um sie visuell auf 0 abzurunden.
Wenn eine andere Polsterung gewünscht wird, wenden Sie die Polsterung beispielsweise nur auf die "Richtung" an, in der das Zusammenfallen des Randes nicht erwünscht ist
padding-top: 0.05px;
.Arbeitsbeispiel:
Bearbeiten: hat den Wert von
0.1
auf geändert0.05
. Wie Chris Morgan in einem Kommentar unten erwähnte, und aus diesem kleinen Test geht hervor , dass Firefox tatsächlich die0.1px
Polsterung berücksichtigt. Obwohl,0.05px
seemes den Trick zu tun.quelle
*{padding-top:0.1px}
. Sind wir sicher, dass es in allen Browsern funktioniert?0.05px
scheint immer noch eine bestimmte Wahl zu sein, keine zufällige Browser-Trickzahl, ich würde es vorziehen0.01px
.overflow:hidden
verhindert kollabierende Ränder, ist aber nicht frei von Nebenwirkungen - nämlich ... verbirgt Überlauf.Abgesehen von diesem und dem, was Sie erwähnt haben, müssen Sie nur lernen, damit zu leben und für diesen Tag zu lernen, an dem sie tatsächlich nützlich sind (kommt alle 3 bis 5 Jahre).
quelle
overflow: auto
ist gut zu verwenden, um versteckte Überläufe und dennoch das Zusammenfallen von Rändern zu verhindern.overflow:auto;
mein Inhaltsbereich hat auf einigen Seiten eine Bildlaufleiste erhalten.Eigentlich gibt es eine, die einwandfrei funktioniert:
Anzeige: flex; Flex-Richtung: Säule;
quelle
<div>
innerhalb des hinzugefügt werden.container
, andernfalls.container
wird das Box-Modell seiner Kinder gesteuert. Inline-Elemente werden beispielsweise zu Blockelementen voller Breite. Wenn sie Ränder haben, werden diese ebenfalls reduziert.Jeder Webkit-basierte Browser sollte die Eigenschaften unterstützen
-webkit-margin-collapse
. Es gibt auch Untereigenschaften, um sie nur für den oberen oder unteren Rand festzulegen. Sie können die Werte reduzieren (Standard), verwerfen (setzt den Rand auf 0, wenn ein benachbarter Rand vorhanden ist) und trennen (verhindert das Reduzieren des Randes).Ich habe getestet, dass dies auf 2014-Versionen von Chrome und Safari funktioniert. Leider glaube ich nicht, dass dies im IE unterstützt wird, da es nicht auf Webkit basiert.
Eine vollständige Erklärung finden Sie in der Safari CSS-Referenz von Apple .
Wenn Sie die Seite mit den CSS-Webkit-Erweiterungen von Mozilla überprüfen , werden diese Eigenschaften als proprietär aufgeführt und empfohlen, sie nicht zu verwenden. Dies liegt daran, dass sie wahrscheinlich nicht in Kürze in Standard-CSS einsteigen werden und nur von Webkit-basierten Browsern unterstützt werden.
quelle
Ich weiß, dass dies ein sehr alter Beitrag ist, wollte aber nur sagen, dass die Verwendung von Flexbox für ein übergeordnetes Element das Reduzieren des Randes für seine untergeordneten Elemente deaktivieren würde.
quelle
Ich hatte ein ähnliches Problem mit dem Randkollaps, weil die Eltern
position
auf relativ gesetzt hatten. Hier ist eine Liste von Befehlen, mit denen Sie das Reduzieren von Rändern deaktivieren können.HIER IST SPIELPLATZ ZU TESTEN
Versuchen Sie einfach , alle zuweisen
parent-fix*
Klassediv.container
Element oder jede Klassechildren-fix*
zudiv.margin
. Wählen Sie diejenige aus, die Ihren Anforderungen am besten entspricht.Wann
div.absolute
rote Hintergrund wird ganz oben auf der Seite positioniert.div.absolute
wird an derselben Y-Koordinate wie positioniertdiv.margin
Hier ist jsFiddle mit einem Beispiel, das Sie bearbeiten können
quelle
In einem neueren Browser (außer IE11) wird eine einfache Lösung verwendet, um zu verhindern, dass Eltern-Kind-Ränder kollabieren
display: flow-root
. Sie benötigen jedoch noch andere Techniken, um das Zusammenfallen benachbarter Elemente zu verhindern.DEMO (vorher)
DEMO (nach)
quelle
Zu Ihrer Information könnten Sie Gitter verwenden, aber mit Nebenwirkungen :)
quelle