Comment désactiver le pliage des marges

Question

Existe-t-il un moyen de désactiver complètement le pliage des marges ? La seule solution que j'ai trouvée (nommée "décollage") consiste à utiliser une bordure de 1 pixel ou un remplissage de 1 pixel. Je trouve cela inacceptable : des pixels supplémentaires compliquent inutilement les calculs. Existe-t-il un moyen plus raisonnable de désactiver cet effondrement de marge ?

P粉521013123 · Answer

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

.parentClass {
    padding: 0.05px;
}

Le rembourrage n'est plus 0, donc aucun effondrement ne se produit, mais en même temps le rembourrage est suffisamment petit pour qu'il soit visuellement arrondi à 0.

Si un remplissage supplémentaire est requis, appliquez uniquement un remplissage dans la "direction" où vous ne souhaitez pas que l'effondrement de la marge se produise, comme 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;
}

边框折叠

  
  


无边框折叠

EDIT : Valeur modifiée de 0,1 à 0,05. Comme Chris Morgan l'a mentionné dans les commentaires ci-dessous, et à partir de ce petit test vous pouvez voir que Firefox prend en compte le remplissage de 0,1px. Cependant, 0.1更改为0.05。正如克里斯·摩根在下面的评论中提到的，并且从这个小测试中可以看出，似乎Firefox确实考虑了0.1px的内边距。不过，0.05px semble fonctionner.

P粉588660399 · Answer

Il existe deux principaux types d'effondrement de marge :

Effondrement de la marge entre les éléments adjacents
Réduction de la marge entre l'élément parent et l'élément enfant

Seulement dans ce dernier cas, l'utilisation d'un rembourrage ou de bordures empêchera le pliage. De plus, la seule différence lorsque vous utilisez quelque chose de différent de sa valeur par défaut (visible）的overflow属性应用于父元素都会防止折叠。因此，overflow: auto和overflow: hidden将产生相同的效果。也许使用hidden) est que le contenu sera masqué de manière inattendue si l'élément parent a une hauteur fixe

.

Certains autres attributs qui peuvent aider à corriger ce comportement lorsqu'ils sont appliqués à l'élément parent sont :

float: left / right
position: absolute
display: flex / grid

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

Je dois ajouter que, comme d'habitude, Internet Explorer est une exception. Plus précisément, dans IE 7, lorsqu'une certaine disposition (telle que width) est spécifiée pour l'élément parent, les marges ne s'effondrent pas.

Source : article Sitepoint Réduire les marges