Existe-t-il un moyen de désactiver complètement l'effondrement des marges? Les seules solutions que j'ai trouvées (sous le nom de "décollement") impliquent l'utilisation d'une bordure 1px ou d'un remplissage 1px. Je trouve cela inacceptable: le pixel superflu complique les calculs sans raison valable. Existe-t-il un moyen plus raisonnable de désactiver cet effondrement des marges?

Il existe deux principaux types d'effondrement des marges:

• Réduction des marges entre les éléments adjacents
• Réduction des marges entre les éléments parent et enfant

L'utilisation d'un rembourrage ou d'une bordure empêchera l'effondrement uniquement dans ce dernier cas. En outre, toute valeur overflowdifférente de sa valeur par défaut ( visible) appliquée au parent empêchera l'effondrement. Ainsi, les deux overflow: autoet overflow: hiddenauront le même effet. La seule différence lors de l'utilisation hiddenest peut-être la conséquence inattendue de masquer le contenu si le parent a une hauteur fixe.

Les autres propriétés qui, une fois appliquées au parent, peuvent aider à résoudre ce problème sont les suivantes:

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

Vous pouvez tous les tester ici: http://jsfiddle.net/XB9wX/1/ .

Je dois ajouter que, comme d'habitude, Internet Explorer est l'exception. Plus précisément, dans IE 7, les marges ne se réduisent pas lorsqu'un type de disposition est spécifié pour l'élément parent, tel que width.

Sources: article de Sitepoint Collapsing Margins

Vous pouvez également utiliser le bon vieux micro clearfix pour cela.

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

Voir le violon mis à jour: http://jsfiddle.net/XB9wX/97/

Une astuce intéressante pour désactiver l'effondrement des marges qui n'a aucun impact visuel, à ma connaissance, consiste à définir le remplissage du parent sur 0.05px:

.parentClass {
    padding: 0.05px;
}

Le rembourrage n'est plus 0, donc l'effondrement ne se produira plus, mais en même temps, le rembourrage est suffisamment petit pour que visuellement il arrondisse à 0.

Si un autre remplissage est souhaité, appliquez-le uniquement à la "direction" dans laquelle la réduction de la marge n'est pas souhaitée, par exemple padding-top: 0.05px;.

Exemple de travail:

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

Modifier: a changé la valeur de 0.1à 0.05. Comme Chris Morgan l'a mentionné dans un commentaire ci-dessous, et à partir de ce petit test , il semble qu'en effet Firefox prenne 0.1pxen compte le rembourrage. Cependant, 0.05pxsemble faire l'affaire.

overflow:hidden empêche l'effondrement des marges mais n'est pas exempt d'effets secondaires - à savoir qu'il ... cache le débordement.

En dehors de cela et de ce que vous avez mentionné, il vous suffit d'apprendre en direct et d'apprendre pour ce jour quand ils sont réellement utiles (tous les 3 à 5 ans).

En fait, il y en a un qui fonctionne parfaitement:

affichage: flex; flex-direction: colonne;

aussi longtemps que vous pouvez vivre avec un support uniquement IE10 et plus

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

Chaque navigateur basé sur webkit doit prendre en charge les propriétés -webkit-margin-collapse. Il existe également des sous-propriétés pour le définir uniquement pour la marge supérieure ou inférieure. Vous pouvez lui donner les valeurs collapse (par défaut), discard (définit la marge à 0 s'il y a une marge voisine) et distinct (empêche la marge de s'effondrer).

J'ai testé que cela fonctionne sur les versions 2014 de Chrome et Safari. Malheureusement, je ne pense pas que cela serait pris en charge dans IE car il n'est pas basé sur le webkit.

Lisez la référence CSS d'Apple Safari pour une explication complète.

Si vous consultez la page des extensions webkit CSS de Mozilla , ils répertorient ces propriétés comme propriétaires et recommandent de ne pas les utiliser. En effet, ils n'entreront probablement pas dans le CSS standard de sitôt et seuls les navigateurs Webkit les prendront en charge.

Je sais que c'est un très ancien article, mais je voulais juste dire que l'utilisation de flexbox sur un élément parent désactiverait l'effondrement de la marge pour ses éléments enfants.

J'ai eu un problème similaire avec l'effondrement de la marge parce que le parent s'est positionmis à relatif. Voici la liste des commandes que vous pouvez utiliser pour désactiver la réduction des marges.

VOICI AIRE DE JEUX POUR TESTER

Essayez simplement d'assigner n'importe quelle parent-fix*classe à l' div.containerélément, ou n'importe quelle classe children-fix*à div.margin. Choisissez celui qui correspond le mieux à vos besoins.

Quand

• la réduction de la marge est désactivée , div.absoluteun arrière-plan rouge sera positionné tout en haut de la page.
• la marge s'effondre div.absolute sera positionnée à la même coordonnée Y quediv.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>

Voici jsFiddle avec un exemple que vous pouvez éditer

Dans un navigateur plus récent (à l'exception d'IE11), une solution simple pour empêcher l'effondrement de la marge parent-enfant consiste à utiliser display: flow-root. Cependant, vous auriez toujours besoin d'autres techniques pour empêcher l'effondrement des éléments adjacents.

DEMO (avant)

.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 (après)

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

Pour votre information, vous pouvez utiliser la grille mais avec des effets secondaires :)

.parent {
  display: grid
}