Pourquoi la marge ne serait-elle pas contenue par l'élément parent?

Lorsqu'un élément avec une marge est contenu dans un autre élément, le parent n'enveloppe pas systématiquement cette marge.Pourquoi la marge ne serait-elle pas contenue par l'élément parent?

Beaucoup de choses causeront le parent d'envelopper la marge de l'enfant:

frontière: solide;
position: absolue;
affichage: en-bloc;
overflow: auto

(. Et ce juste de petits essais, sans doute il y a plus)

Je suppose que cela a à voir avec des marges effondrement, mais:

La page de spécifications W3C n'a aucune description d'un tel comportement.
Il n'y a pas de chevauchement de marges ici.
Le comportement de tous les navigateurs semble être cohérent sur ce problème.
Le comportement est affecté par les déclencheurs qui ne sont pas liés aux marges

Quelle est la logique par laquelle un élément par défaut overflow: auto doit contenir du matériel différent de celui où le dépassement est réglé sur auto .

Pourquoi tout sauf le comportement par défaut d'une div régulière suppose-t-il que la marge est contenue par le parent - et pourquoi la valeur par défaut standard ne devrait-elle pas inclure la marge?

EDIT: La réponse finale est que le W3C fait vraiment préciser ce comportement, mais que

Les spécifications ne font pas vraiment de sens.
The specs mix, without any word of explanation:
- « marges libres » (marges qui touchent la partie supérieure ou inférieure de leur parent ne sont pas contenus par le parent) et
- « effondrées marges » (les marges adjacentes sont autorisées à se chevaucher).

Démo:

<!doctype html> 
<html> 
<head> 
<title>Margins overextending themselves</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
<style type="text/css"> 
    body{ 
     margin:0; 
    } 
    div.b{ 
     background-color:green; 
    } 
    div.ib{ 
     display:inline-block; 
     background-color:red; 
    } 
    div.pa{ 
     background-color:yellow; 
     position:absolute; 
     bottom:0; right:0; 
    } 
    div.oa{ 
     background-color:magenta; 
     overflow:auto; 
    } 
    div.brdr{ 
     background-color:pink; 
     border:solid; 
    } 

    h1{margin:100px; width:250px; border:solid;} 
</style> 
</head> 
<body> 
<div class="b"> 
    <h1>Is the margin contained?</h1> 
</div> 
<div class="ib"> 
    <h1>Is the margin contained?</h1> 
</div> 
<div class="pa"> 
    <h1>Is the margin contained?</h1> 
</div> 
<div class="oa"> 
    <h1>Is the margin contained?</h1> 
</div> 
<div class="brdr"> 
    <h1>Is the margin contained?</h1> 
</div> 
</body> 
</html>`

Source

2010-02-01 SamGoody

Je ne comprends pas ce que vous demandez. Demandez-vous pourquoi les éléments h1 s'affichent à l'intérieur des éléments du conteneur? S'il vous plaît soyez plus clair avec votre question. –

Voilà comment fonctionne CSS according to W3C:

Dans cette spécification, l'expression des marges effondrement signifie que les marges adjacentes (pas de contenu non vide, rembourrage, ou zones de bordure, ou séparation les séparent) de deux boîtes ou plus (qui peuvent être côte à côte ou imbriquées) se combinent pour former une seule marge.

Plus spécifique à votre cas de la partie supérieure div:

Si les marges supérieure et inférieure d'une boîte sont jointives, il est possible pour les marges effondrement à travers elle. Dans ce cas, la position de l'élément dépend de sa relation avec les autres éléments dont les marges sont en train de s'effondrer.

Si les marges de l'élément sont réduites avec la marge supérieure de son parent, le bord supérieur de la boîte est défini comme étant identique à celui du parent.

Sinon, le parent de l'élément ne participe pas à la réduction de la marge, ou seule la marge inférieure du parent est impliquée. La position du bord supérieur de l'élément est la même que si l'élément avait une bordure inférieure non nulle.

La meilleure chose que je peux faire est de vous diriger vers le "Collapsing Margins" on sitepoint(par Tommy Olsson et Paul O'Brien). Ils font une explication détaillée avec des exemples qui vous montrent exactement les comportements que vous avez démontrés dans le code de l'exemple de question.

Source

2010-02-01 12:37:42

Selon cet article, le comportement vu est incorrect.
En ce qui concerne votre réponse: "les marges qui s'effondrent signifient que les marges adjacentes ... se combinent". Comme il n'y a pas de marges adjacentes ici, cela ne peut pas être une marge qui s'effondre. Plus précisément, "Si les marges de l'élément sont réduites avec la marge supérieure de son parent" - ne peut pas l'être, car le parent n'a pas de marge supérieure. Dans la question, je traite des marges d'effondrement. Dans les deux cas, cependant, cela n'expliquerait pas pourquoi le comportement devrait changer lorsque l'affichage est inline-block, ou overflow est défini sur auto (qui est identique à la valeur par défaut). – SamGoody

Correction: Dans cet article, il énumère certains de mes déclencheurs + autres. Tout comme ces déclencheurs empêchent l'effondrement des marges qui se chevauchent, ils empêchent également les marges régulières de s'effondrer. Deux questions: 1) Comment ce comportement peut-il avoir un sens? 2) Pourquoi pense-t-il que j'ai une marge qui se chevauche? – SamGoody

@samgoody - 1) Je suis d'accord que cela n'a pas beaucoup de sens, sauf si vous venez d'un arrière-plan d'impression, qui est principalement ce que le web était quand la spécification a été écrite. Voir ici pour cette vue: http://complexspiral.com/publications/uncollapsing-margins/ 2) C'est une chose parent/enfant dans votre cas ... l'effondrement du parent/enfant donne 'div.b' le 100px marge verticale, ce qui explique pourquoi ce fond blanc au lieu de vert. Je pense que le problème est la spécification n'est pas clair sur ** QUI ** marge gagne dans un effondrement dans ce cas, semble avec le navigateur actuel, le parent l'obtient. –

Pourquoi la marge ne serait-elle pas contenue par l'élément parent?

Répondre

Questions connexes