Wie uncollapse ich einen Spielraum? [Duplikat]

https://stackoverflow.com/questions/1828804

11-09-2019
|

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 und inline-flex display   Werte

Ein 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 und inline-grid   Anzeige   Werte

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow