Éléments de marge supérieure et en ligne

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 la marge supérieure 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 le CSS 2.1 Spécification :

Spécification CSS 2.1 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 valeur définie. hauteur et largeur et sont généralement affichés 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 accueillir 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.