Pourquoi la marge supérieure est-elle ignorée sur les éléments HTML en ligne ?

Marges en HTML5 - Pourquoi Margin-Top est ignoré pour les éléments en ligne

En HTML5, certains éléments comme span sont classés comme éléments en ligne, tandis que d'autres comme div et p sont des éléments au niveau du bloc. Ces classifications ont un impact sur la façon dont les marges sont appliquées à ces éléments.

Comprendre les éléments en ligne

Les éléments en ligne sont conçus pour s'écouler naturellement dans les lignes de texte. Ils occupent le minimum d’espace vertical possible nécessaire pour afficher leur contenu. Par conséquent, les marges verticales ne leur sont pas applicables. Lorsque vous appliquez margin-top à un élément en ligne comme span, il est simplement ignoré.

Solution : Inline-Block ou Block Display

Pour donner des éléments en ligne comme span une marge en haut, vous avez deux options :

• Affichage : inline-block : Ce paramètre fait en sorte que l'élément se comporte comme un élément de bloc tout en lui permettant de s'écouler dans une ligne de texte. Il prend en charge les marges horizontales et verticales.
• Affichage : bloc : Ce paramètre convertit l'élément en élément de niveau bloc, lui permettant d'occuper tout son espace vertical et horizontal disponible. Cependant, il affichera l'élément sur une nouvelle ligne.

Exemple

Considérez le code HTML et CSS suivant :

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!