C'è un modo per disabilitare del tutto il collasso dei margini? Le uniche soluzioni che ho trovato (con il nome di "uncollapsing") prevedono l'utilizzo di un bordo 1px o di un'imbottitura 1px. Lo trovo inaccettabile: il pixel estraneo complica i calcoli senza una buona ragione. C'è un modo più ragionevole per disabilitare questo margine di collasso?

Esistono due tipi principali di collasso dei margini:

• Margini collassanti tra elementi adiacenti
• Margini collassanti tra elementi padre e figlio

L'uso di un'imbottitura o di un bordo impedirà il collasso solo in quest'ultimo caso. Inoltre, qualsiasi valore overflowdiverso dal suo default ( visible) applicato al genitore impedirà il collasso. Pertanto, entrambi overflow: autoe overflow: hiddenavranno lo stesso effetto. Forse l'unica differenza durante l'utilizzo hiddenè la conseguenza non intenzionale di nascondere il contenuto se il genitore ha un'altezza fissa.

Altre proprietà che, una volta applicate al genitore, possono aiutare a correggere questo comportamento sono:

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

Puoi testarli tutti qui: http://jsfiddle.net/XB9wX/1/ .

Dovrei aggiungere che, come al solito, Internet Explorer è l'eccezione. Più specificamente, in IE 7 i margini non si riducono quando viene specificato un tipo di layout per l'elemento padre, ad esempio width.

Fonti: articolo di Sitepoint Margini collassanti

Per questo puoi anche usare il buon vecchio micro clearfix.

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

Vedi violino aggiornato: http://jsfiddle.net/XB9wX/97/

Un trucco per disabilitare il collasso dei margini che non ha alcun impatto visivo, per quanto ne so, è impostare il riempimento del genitore su 0.05px:

.parentClass {
    padding: 0.05px;
}

L'imbottitura non è più 0, quindi il collasso non avverrà più, ma allo stesso tempo l'imbottitura è abbastanza piccola da rendere visivamente arrotondata a 0.

Se si desidera un'altra imbottitura, applicare l'imbottitura solo nella "direzione" in cui non si desidera il collasso dei margini, ad esempio padding-top: 0.05px;.

Esempio funzionante:

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

Modifica: modificato il valore da 0.1a 0.05. Come ha detto Chris Morgan in un commento qui sotto, e da questo piccolo test , sembra che Firefox prenda 0.1pxin considerazione l' imbottitura. 0.05pxTuttavia , sembra fare il trucco.

overflow:hidden impedisce il collasso dei margini, ma non è privo di effetti collaterali - vale a dire ... nasconde il troppo pieno.

A parte questo e quello che hai menzionato, devi solo imparare a conviverci e imparare per questo giorno quando sono effettivamente utili (arriva ogni 3-5 anni).

In realtà, ce n'è uno che funziona perfettamente:

display: flessibile; direzione flessibile: colonna;

purché tu possa vivere supportando solo IE10 e versioni successive

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

Ogni browser basato su webkit dovrebbe supportare le proprietà -webkit-margin-collapse. Ci sono anche proprietà secondarie per impostarlo solo per il margine superiore o inferiore. Puoi assegnargli i valori di compressione (impostazione predefinita), scarta (imposta il margine su 0 se esiste un margine adiacente) e separa (impedisce la compressione del margine).

Ho provato che funziona con le versioni 2014 di Chrome e Safari. Sfortunatamente, non penso che questo sarebbe supportato in IE perché non è basato su webkit.

Leggi il riferimento CSS Safari di Apple per una spiegazione completa.

Se controlli la pagina delle estensioni webkit CSS di Mozilla , queste proprietà sono elencate come proprietarie e raccomandano di non usarle. Questo perché probabilmente non entreranno presto nei CSS standard e solo i browser basati su webkit li supporteranno.

So che questo è un post molto vecchio, ma volevo solo dire che l'uso di flexbox su un elemento genitore disabiliterebbe il collasso dei margini per i suoi elementi figlio.

Ho avuto un problema simile con il collasso del margine a causa del genitore position impostato su relativo. Ecco un elenco di comandi che è possibile utilizzare per disabilitare il collasso dei margini.

ECCO IL PARCO GIOCHI DA PROVA

Prova ad assegnare qualsiasi parent-fix*classe div.containerall'elemento o qualsiasi classe children-fix*a div.margin. Scegli quello più adatto alle tue esigenze.

quando

• il collasso dei margini è disabilitato , div.absolutecon lo sfondo rosso posizionato nella parte superiore della pagina.
• il margine che sta crollando div.absolute verrà posizionato sulla stessa coordinata Y didiv.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>

Ecco jsFiddle con l'esempio che puoi modificare

Nel browser più recente (escluso IE11), è necessario utilizzare una semplice soluzione per impedire il collasso del margine genitore-figlio display: flow-root. Tuttavia, sarebbero comunque necessarie altre tecniche per impedire il collasso dell'elemento adiacente.

DEMO (prima)

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

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

Per tua informazione, puoi usare la griglia ma con effetti collaterali :)

.parent {
  display: grid
}