Wie uncollapse ich einen Spielraum? [Duplikat]
Frage
Diese Frage bereits eine Antwort hier:
- Wie margin-Kollabieren deaktivieren? 9 Antworten
Einstürzen Margen in CSS: http://www.w3.org /TR/CSS21/box.html#collapsing-margins
ich den Zweck der Funktion verstehen , aber ich versuche, das Layout zu tun, und ich kann nicht herausfinden, wie es zu deaktivieren.
Die Art und Weise in der Regel in CSS Tutorials erklärt ist entweder:
- Fügen Sie eine Grenze
- Fügen Sie eine Polsterung
Alle diese Nebenwirkungen haben, die offensichtlich werden, wenn Sie mit pixelgenaue Layouts mit Hintergrundbildern und feste Polsterungen handelt.
Gibt es eine Möglichkeit des zusammenbrechende, einfach zu deaktivieren, ohne zusätzliche Pixel in das Layout schieben zu müssen? Es macht keinen Sinn für mich, um visuell das Dokument beeinflussen zu müssen Verhalten wie dies zu ändern.
Lösung
gut brauchen Sie etwas dazwischen zu „brechen“ die kollabieren.
mein erster Gedanke war ein div mit display:none
zwischen setzen in verwenden, aber das scheint nicht zu funktionieren.
also habe ich versucht:
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
, die den Job gut zu tun scheint (zumindest in Firefox, Internet Explorer nicht hier installiert hat, es zu testen ...)
<html>
<body>
<div style="margin: 100px;">.</div>
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
<div style="margin: 100px;">.</div>
</body>
</html>
Andere Tipps
Von IE8 könnten Sie tun:
<div class="uncollapse-margins">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Mit CSS:
.uncollapse-margins:before,
.uncollapse-margins:after
{
content: "\00a0"; /* No-break space character */
display: block;
overflow: hidden;
height: 0;
}
Mit Flex oder Grid-Layout.
In flex und Gittercontainer, es gibt nicht so etwas wie Marge kollabieren.
Mehr Details in den Spezifikationen:
3. Flex-Container: die
flex
undinline-flex
display
WerteEin flex Container stellt einen neuen Flex-Formatierungskontext für ihr Inhalt. Dies ist das gleiche wie ein Blockformatierungskontext zur Gründung, außer dass Flex-Layout anstelle von Blocklayout verwendet. Zum Beispiel, Schwimmer dringt nicht in die Flex-Container, und die Flex Behälter Margen nicht mit den Rändern seines Inhalts kollabieren.
5.1. Gründung Grid-Container: die
grid
undinline-grid
Anzeige WerteEin Gitter Container stellt einen neuen Netzformatierungskontext für ihr Inhalt. Dies ist das gleiche wie ein Blockformatierungskontext zur Gründung, anstelle von Blocklayout verwendet, außer dass Grid-Layout ist: Schwimmer nicht dringen in das Netz Behälter und die Margen des Gitterbehälter tun nicht mit den Rändern seines Inhalts kollabieren.
Eric Meyer bezieht sich auf Ihren genauen Punkt in seinem Artikel rel="noreferrer">.
Siehe den Text des Artikels nach 6 für seinen Ansatz. Er erwähnt, dass 1px padding / Grenze ist in der Regel der Weg zu gehen, bietet aber eine ziemlich einfache Lösung für Fälle, in denen es, dass zusätzlichen Pixeln in dem Hinzufügen keine Flexibilität ist.
Es geht auf jedes Element manuell überschrieben Margen obwohl, so dass ich bin mir nicht sicher, ob es für Ihren speziellen Fall funktionieren wird.
Ein nette Trick-Marge Kollabieren zu deaktivieren, die keine visuelle Wirkung hat, soweit ich weiß, ist die Polsterung der Mutter Einstellung 0.05px
:
.parentClass {
padding: 0.05px;
}
Die Polsterung ist nicht mehr 0, so kollabiert nicht mehr auftreten wird, aber zur gleichen Zeit ist die Polsterung klein genug, dass visuell wird es auf 0 abrunden
wenn einige andere padding erwünscht ist, dann gelten padding nur auf die „Richtung“, in dem Rand Kollabieren nicht erwünscht ist, beispielsweise padding-top: 0.05px;
.
Arbeitsbeispiel:
.noCollapse {
padding: 0.05px;
}
.parent {
background-color: red;
width: 150px;
}
.children {
margin-top: 50px;
background-color: lime;
width: 100px;
height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
<div class="children">
</div>
</div>
<h3>No border collapsing</h3>
<div class="parent noCollapse">
<div class="children">
</div>
</div>
Edit: , um den Wert von 0.1
geändert 0.05
. Von diesem kleinen Test , scheint es, dass Firefox die 0.1px
Polsterung berücksichtigt. Obwohl, 0.05px
seemes den Trick zu tun.