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?

Es gibt zwei Haupttypen des Randkollapses:

• Reduzierende Ränder zwischen benachbarten Elementen
• Reduzieren von Rändern zwischen übergeordneten und untergeordneten Elementen

Die Verwendung einer Polsterung oder eines Randes verhindert nur im letzteren Fall ein Zusammenfallen. Außerdem verhindert jeder Wert, der overflowvon seinem visibleauf das übergeordnete Element angewendeten Wert ( ) abweicht, das Zusammenfallen. Somit haben beide overflow: autound overflow: hiddenden gleichen Effekt. Möglicherweise ist der einzige Unterschied bei der Verwendung hiddendie 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

Sie können hierfür auch den guten alten Micro Clearfix verwenden.

#container:before, #container:after{
    content: ' ';
    display: table;
}

Siehe aktualisierte Geige: http://jsfiddle.net/XB9wX/97/

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:

.parentClass {
    padding: 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:

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

Bearbeiten: hat den Wert von 0.1auf geändert 0.05. Wie Chris Morgan in einem Kommentar unten erwähnte, und aus diesem kleinen Test geht hervor , dass Firefox tatsächlich die 0.1pxPolsterung berücksichtigt. Obwohl, 0.05pxseemes den Trick zu tun.

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

Eigentlich gibt es eine, die einwandfrei funktioniert:

Anzeige: flex; Flex-Richtung: Säule;

Solange Sie mit der Unterstützung von nur IE10 und höher leben können

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

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

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

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.

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.

Ich hatte ein ähnliches Problem mit dem Randkollaps, weil die Eltern positionauf 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*Klasse div.containerElement oder jede Klasse children-fix*zu div.margin. Wählen Sie diejenige aus, die Ihren Anforderungen am besten entspricht.

Wann

• Das Reduzieren von Rändern ist deaktiviert . Der div.absoluterote Hintergrund wird ganz oben auf der Seite positioniert.
• Der Rand kollabiert und div.absolute wird an derselben Y-Koordinate wie positioniertdiv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

Hier ist jsFiddle mit einem Beispiel, das Sie bearbeiten können

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)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

DEMO (nach)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Zu Ihrer Information könnten Sie Gitter verwenden, aber mit Nebenwirkungen :)

.parent {
  display: grid
}