Wie zu deaktivieren margin-collapsing?

Gibt es zwei Arten von margin-collapse:

• Einstürzenden Rändern zwischen benachbarten Elementen
• Collapsing margins zwischen übergeordneten und untergeordneten Elementen

Mit einem padding oder border verhindert Zusammenbruch nur im letzteren Fall. Auch jeder Wert von overflow unterscheidet sich von seinem Standardwert (visible) angewendet, um die Eltern zu verhindern, Zusammenbruch. So, beide overflow: auto und overflow: hidden wird den gleichen Effekt haben. Vielleicht der einzige Unterschied bei der Verwendung von hidden ist die unbeabsichtigte Folge des Versteckens Inhalte, wenn die Muttergesellschaft hat eine Feste Höhe.

Anderen Eigenschaften, die, einmal angewendet, um die Eltern, kann helfen, zu beheben dieses Verhalten sind:

• float: left /right
• position: absolute
• display: inline-block

Können Sie testen, alle von Ihnen hier: http://jsfiddle.net/XB9wX/1/.

Sollte ich hinzufügen, dass, wie üblich, Internet Explorer ist die Ausnahme. Genauer gesagt, im IE 7 die Margen nicht zusammenbrechen, wenn einige Art von layout angegeben ist, für das übergeordnete element, wie width.

Quellen: Sitepoint Artikel Collapsing Margins

Einen netten trick zum deaktivieren Marge kollabiert, das hat keine optische Wirkung, soweit ich weiß, ist die Einstellung der Polsterung des Elternteils, der 0.05px:

.parentClass {
    padding: 0.05px;
}

Die Polsterung ist nicht mehr 0, so kollabieren nicht mehr auftreten, aber zur gleichen Zeit, der Abstand ist klein genug, dass die visuell Runde auf 0.

Wenn einige andere Polsterung gewünscht ist, dann gelten die Polsterung nur für die "Richtung", in die margin collapsing ist nicht erwünscht, zum Beispiel padding-top: 0.05px;.

Beispiel:

CSS:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

HTML:

<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: verändert den Wert von 0.1 zu 0.05. Wie Chris Morgan erwähnt in einem Kommentar unten, und von dieser kleine test, es scheint, dass in der Tat Firefox nimmt die 0.1px Polsterung zu berücksichtigen. Obwohl 0.05px seemes, den trick zu tun.

Jedem webkit-basierten browser unterstützen sollte, die die Eigenschaften -webkit-margin-collapse. Es gibt auch untereigenschaften nur legen Sie es am oberen oder unteren Rand. Geben Sie die Werte Zusammenbruch (Standard), verwerfen (sets margin auf 0 setzen, wenn es einen benachbarten Rand) und einem separaten (verhindert Marge Zusammenbruch).

Habe ich getestet, dies funktioniert auf die 2014-Versionen von Chrome und Safari. Leider, ich glaube nicht, dass diese unterstützt werden würde im IE, da es nicht basierend auf webkit.

Lesen Apple ' s Safari CSS Reference für eine vollständige Erklärung.

Wenn Sie das Kontrollkästchen Mozilla webkit-CSS-extensions-Seite, dann Listen Sie diese Eigenschaften als proprietäre und empfehlen, Sie nicht zu verwenden. Dies ist, weil Sie wahrscheinlich nicht zu gehen in die standard-CSS jederzeit schnell und nur webkit-basierte Browser unterstützen.

Tatsächlich, es ist eine, die funktioniert einwandfrei:

display: flex;
flex-direction: column;

so lange, wie Sie Leben können mit Unterstützung nur IE10 und bis

CSS:

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

HTML:

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Für Ihre Informationen, die Sie nutzen könnten
raster, aber mit Nebenwirkungen 🙂

.parent {
  display: grid
}