Pourquoi Margin Top ne fonctionne-t-il pas sur les éléments en ligne en CSS ?

Éléments Margin Top et Inline

En CSS, la propriété margin est utilisée pour définir l'espacement en dehors des bordures d'un élément. Cependant, un problème courant survient lors de l'utilisation de margin top sur des éléments en ligne, en particulier dans Firefox.

Le problème :

Pourquoi la marge supérieure semble-t-elle être ignorée pour les éléments en ligne dans Firefox ?

La réponse :

Ce comportement n'est pas exclusif à Firefox mais est défini dans la spécification CSS 2.1 :

CSS 2.1 Spécification sur les propriétés des marges :

"Les marges verticales n'auront aucun effet sur les éléments en ligne non remplacés."

Explication :

Les éléments en ligne, tels que le texte, les balises et Les balises n'ont pas de hauteur ni de largeur définies et sont généralement affichées sous la forme d'une seule ligne de contenu. Margin top, une propriété de marge verticale, tente de créer un espace au-dessus de l'élément en ligne. Cependant, comme l'élément en ligne n'a pas de hauteur pour s'adapter à la marge, il est ignoré.

Conclusion :

Conformément à la spécification CSS, margin top n'est pas applicable à éléments en ligne. Pour ajouter un espace vertical au-dessus des éléments en ligne, envisagez d'utiliser d'autres options telles que line-height ou padding-top.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!