Marge CSS comportement étrange, pourquoi?

Avoir le code HTML ci-dessousMarge CSS comportement étrange, pourquoi?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
    <div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div> 
    <div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div> 
</body> 
</html>

l'espace entre ces deux DIVs est seulement 10 pixels.

Pourquoi? Explique s'il te plaît.

Source

2009-06-01 Alin Vasile

Ce comportement est appelé collapsing margins. Les valeurs de marge ne sont pas ajoutés, mais la valeur élevée est utilisée:

marges verticales peuvent replier entre certaines boîtes:

deux ou plusieurs marges verticales adjacentes de boîtes de bloc dans l'effondrement d'écoulement normal. La largeur de marge résultante est le maximum des largeurs de marge adjacentes. [...]

[...]

Source

2009-06-01 19:02:13 Gumbo

Y at-il un moyen d'empêcher cela? Je n'aime pas ce comportement. –

Pourquoi ne pas augmenter les valeurs à 20px? – Gumbo

Je ne vais pas augmenter la valeur à 20px parce que je vais utiliser la marge dans d'autres contextes, je vais avoir des contrôles ASP .NET placés au hasard à l'exécution sur différents espaces –

est ici un bon explanation of margin collapsing. Fondamentalement, il semble que toutes les marges adjacentes s'effondreront l'une dans l'autre, selon la spécification CSS et contre tout bon sens.

Source

2009-06-01 19:06:30 tghw

si vous voulez avoir l'effet désiré, vous pouvez utiliser « padding » à la place, les marges effondrement toujours

Source

2009-06-01 19:12:07 Rony

rembourrage n'est pas bon pour mon but parce que j'utilise la propriété CSS background-color –

Je pense que la frontière est la bonne solution pour cela, mais encore une fois, c'est étrange –

Marge CSS comportement étrange, pourquoi?

Répondre

Questions connexes