H1 semble avoir zéro margin-top dans Chrome

Voici mon code HTML.H1 semble avoir zéro margin-top dans Chrome

<html> 
<head> 
<title>Foo</title> 
<style> 
body { 
    margin: 0; 
} 
</style> 
</head> 
<body> 
<main> 
<h1>Foo</h1> 
<p>Bar</p> 
</main> 
</body> 
</html>

Voici la sortie sur Chrome 61.0.3163.100 sur macOS 10.12.6.

Vous pouvez voir que la sortie se comporte comme si margin-top de l'élément <h1> est 0. Mais le modèle de boîte montre une marge de 21,440.

La sortie semble correcte sur Firefox.

Source

2017-10-08 Lone Learner

Vous n'utilisez un doctype et êtes quirks mode où vous ne voulez jamais être. Ajoutez un doctype approprié sur votre première ligne, pour vous mettre en «mode standard» et le problème disparaît.

<!DOCTYPE html>

Source

2017-10-08 14:45:13 Rob

-1

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Effondrement des marges verticales est construit. Chrome placé plus d'importance sur votre marge de corps que Firefox a fait, et a utilisé votre style comme une priorité plus élevée. Pour éviter le problème de la réduction des marges, vous pouvez utiliser à la place display-block et padding-bottom sur chacun de vos éléments de texte au lieu de marges.

Source

2017-10-08 11:58:16

Je dois m'excuser, j'ai mal compris votre question. Lorsqu'elles ne sont pas séparées par une bordure ou un remplissage, les marges des parents et des enfants s'effondrent, et seule la plus grande marge prévaut à l'extérieur de la frontière du parent.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Parent et premier/dernier enfant: S'il n'y a pas de frontière, le rembourrage, une partie en ligne , le contexte de mise en forme de bloc créé, ou l'autorisation de séparer la marge supérieure d'un bloc de le bord supérieur de son premier bloc enfant; ou aucune bordure, marge, contenu en ligne, hauteur, hauteur minimale ou hauteur maximale pour séparer le bas de la marge d'un bloc du bas de son dernier enfant, puis ces marges s'effondrent. La marge repliée finit en dehors du parent.

Ces règles sont applicables même aux marges sont nulles, de sorte que la marge d'un premier/dernier enfant se termine à l'extérieur de son parent (selon les règles ci-dessus) si la marge du parent ou non est nul.

Si la marge du parent est 0, la marge réduite est réduite à la marge parente suivante. Regardez cet exemple:

L'exemple montre ceci:

<html> 
<head> 
<body> 
<main> 
<h1>Foo</h1> 
<p>Bar</p> 
</main> 
</body> 
</html>

Dans les trois premiers « foos » principale a une marge supérieure de 8px, croula avec la marge par défaut de h1 et la marge de résultat va de la frontière html à la frontière principale.

Dans les deux prochains "foos" la marge de main est 0, donc la marge s'effondre avec le corps et sort de la bordure html.

C'est ce qui se passe en chrome, il applique un agent par défaut style utilisateur:

-webkit-margin-before: 0.67em; 
-webkit-margin-after: 0.67em;

qui s'effondre avec la marge de corps et va à l'extérieur de la frontière html. Firefox semble se comporter différemment, si vous supprimez la balise principale, la bordure de h1 est en dehors du html comme dans Chrome, mais avec le parent principal (mais avec une marge de 0) cela n'arrive pas. J'ai regardé les styles du navigateur, mais je ne trouve rien qui explique, je peux seulement dire que les navigateurs se comportent différemment. Désolé si mon explication n'est pas la meilleure, c'est un problème compliqué, et merci de l'avoir apporté pour cela était amusant d'enquêter.

Lecture sur les marges s'effondrent:

https://www.w3.org/TR/CSS21/box.html#collapsing-margins

Source

2017-10-08 14:08:54 MarioZ

H1 semble avoir zéro margin-top dans Chrome

Répondre

Questions connexes