Comment puis-je uncollapse une marge? [dupliquer]

StackOverflow https://stackoverflow.com/questions/1828804

  •  11-09-2019
  •  | 
  •  

Question

    

Cette question a déjà une réponse ici:

         

Collapsing marges CSS: http://www.w3.org /TR/CSS21/box.html#collapsing-margins

Je comprends le de la fonction , mais je suis en train de faire la mise en page, et je ne peux pas comprendre comment l'éteindre.

La façon généralement dans des tutoriels expliqué CSS est soit:

  1. Ajouter une bordure
  2. Ajouter un padding

Tous ces éléments ont des effets secondaires qui deviennent évidents lorsque vous traitez avec des configurations de pixels parfait avec des images d'arrière-plan et rembourrages fixes.

Est-il possible de désactiver simplement l'effondrement sans avoir à pousser des pixels supplémentaires dans la mise en page? Il ne fait pas de sens pour moi d'avoir à affecter visuellement le document pour modifier le comportement comme celui-ci.

Était-ce utile?

La solution

bien que vous besoin de quelque chose entre « casser » l'effondrement.

ma première pensée était d'utiliser un div avec display:none fixé entre les deux, mais cela ne semble pas fonctionner.

donc j'ai essayé: 

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

qui semble faire le travail bien (au moins dans Firefox, n'ont pas Internet Explorer installé ici pour le tester ...) 

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

Autres conseils

De IE8 vous pouvez faire: 

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Avec CSS: 

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

Utilisez Flex ou la mise en grille.

Dans les conteneurs flexibles et la grille, il n'y a pas une telle chose comme marge effondrement.

Plus de détails dans les spécifications:

  

3. Les conteneurs Flex: la flex et inline-flex display   valeurs

     

Un conteneur flexible établit un nouveau contexte de mise en forme flexible pour sa   Contenu. Ceci est le même que l'établissement d'un contexte de mise en forme de bloc,   sauf que la mise en page flexible est utilisé au lieu de la mise en page de bloc. Par exemple,   flotteurs n'empiètent pas dans le conteneur flexible, et le flex   Les marges de conteneurs n'effondrement pas avec les marges de son contenu.

     

5.1. Mise en place des conteneurs grille: le grid et inline-grid   afficher   valeurs

     

Récipient de réseau établit un nouveau contexte de mise en forme de grille pour sa   Contenu. Ceci est le même que l'établissement d'un contexte de mise en forme de bloc,   sauf que la mise en page de la grille est utilisée au lieu de la mise en page de bloc: flotteurs ne le font pas   pénètrent dans le récipient de la grille, et les marges du conteneur de grille font   pas l'effondrement des marges de son contenu.

Eric Meyer fait référence à votre point exact dans son article marges Uncollapsing .

Voir le texte de l'article après la figure 6 pour son approche. Il mentionne que le rembourrage 1px / frontière est généralement le chemin à parcourir, mais offre une solution assez simple pour les cas où il n'y a pas de souplesse pour ajouter ce pixel supplémentaire.

Il implique des marges sur déroger manuellement chaque élément, donc je ne sais pas si cela fonctionnera pour votre cas particulier.

Une astuce pour désactiver effondrements de marge qui n'a pas d'impact visuel, pour autant que je sache, est la mise en le rembourrage du parent à 0.05px: 

.parentClass {
    padding: 0.05px;
}

Le rembourrage n'est plus 0 si écroulait ne se produira plus, mais en même temps le rembourrage est assez petit pour que visuellement arrondirons à 0.

Si un autre remplissage est désiré, puis appliquez un rembourrage seulement à la « direction » dans laquelle effondrements de 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>

Edit: a changé la valeur de 0.1 à 0.05. De ce petit test, il semble que Firefox prend le rembourrage de 0.1px en considération. Bien que, 0.05px seemes faire l'affaire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top