Comment désactiver la réduction des marges?

Existe-t-il un moyen de désactiver complètement la réduction des marges? Les seules solutions que j’ai trouvées (sous le nom de “uncollapsing”) impliquent l’utilisation d’une bordure 1px ou 1px. Je trouve cela inacceptable: le pixel externe complique les calculs sans raison valable. Existe-t-il un moyen plus raisonnable de désactiver cette réduction des marges?

Il existe deux principaux types d’effondrement des marges:

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

L’utilisation d’un remplissage ou d’une bordure empêchera l’effondrement uniquement dans ce dernier cas. En outre, toute valeur de overflow différente de sa valeur par défaut ( visible ) appliquée au parent empêchera la réduction. Ainsi, les deux overflow: auto et overflow: hidden auront le même effet. La seule différence dans l’utilisation de hidden est peut-être la conséquence involontaire de la dissimulation de 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

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

Je dois append que, comme d’habitude, Internet Explorer est l’exception. Plus précisément, dans IE 7, les marges ne se réduisent pas lorsqu’une disposition est spécifiée pour l’élément parent, telle 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/

Pour ce que je sache, une astuce pour désactiver le regroupement des marges sans impact visuel consiste à définir le remplissage du parent sur 0.1px :

 .parentClass { padding: 0.1px; } 

Le remplissage n’est plus 0, donc le regroupement ne se produira plus et le remplissage est inférieur à 0,5px, donc visuellement, il sera arrondi à 0.

Si un autre rembourrage est souhaité, appliquez le remplissage uniquement à la “direction” dans laquelle la padding-top: 0.1px; marge n’est pas souhaitée, par exemple: padding-top: 0.1px; .

Exemple de travail:

 .noCollapse { padding: 0.1px; } .parent { background-color: red; width: 150px; } .children { margin-top: 50px; background-color: lime; width: 100px; height: 100px; } 
 

Border collapsing

No border collapsing

overflow:hidden empêche l’effondrement des marges mais il 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é, vous devez simplement apprendre à vivre avec et apprendre pour ce jour où ils sont réellement utiles (tous les 3 à 5 ans).

Chaque navigateur Webkit devrait 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 réduites (par défaut), les supprimer (définit la marge sur 0 s’il y a une marge voisine) et les séparer (empêche la réduction des marges).

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 ne repose pas sur Webkit.

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

Si vous consultez la page des extensions CSS webkit de Mozilla , elles répertorient ces propriétés en tant que propriétés propriétaires et recommandent de ne pas les utiliser. En effet, ils ne seront probablement pas utilisés dans les CSS standard et seuls les navigateurs Webkit les prendront en charge.

Je sais que c’est un article très ancien mais je voulais juste dire que l’utilisation de flexbox sur un élément parent désactiverait la réduction des marges pour ses éléments enfants.

J’ai eu un problème similaire avec l’effondrement des marges en raison de la position parentale du parent. Voici la liste des commandes que vous pouvez utiliser pour désactiver la réduction des marges.

VOICI LE TERRAIN DE TEST

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

Quand

  • la div.absolute marge est désactivée , div.absolute avec un arrière-plan rouge sera positionné tout en haut de la page.
  • la marge s’effondre div.absolute sera positionné à la même coordonnée Y que div.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; } 
 
margin

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

affichage: flex; flex-direction: colonne;

aussi longtemps que vous pouvez vivre avec uniquement le support IE10 et supérieur

 .container { display: flex; flex-direction: column; background: #ddd; width: 15em; } .square { margin: 15px; height: 3em; background: yellow; } 
 

Pour votre information, vous pouvez utiliser la grid mais avec des effets secondaires 🙂

 .parent { display: grid }