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

Margin-Top ne fonctionne pas pour les éléments en ligne : comprendre le comportement en ligne

En HTML, des éléments comme sont considérés comme des éléments en ligne, contrairement aux éléments de niveau bloc comme

ou

. Les éléments au niveau du bloc peuvent accepter des marges de tous les côtés, tandis que les éléments en ligne n'autorisent que les marges horizontales.

Les propriétés de marge CSS définissent la largeur de la zone de marge entourant un élément. Lorsqu'elles sont appliquées à des éléments au niveau du bloc, les marges affectent les quatre côtés. Cependant, pour les éléments en ligne comme , les marges verticales sont inefficaces.

Selon la spécification CSS, "les marges verticales n'auront aucun effet sur les éléments en ligne non remplacés."

Solution :

Pour autoriser les marges verticales sur un élément en ligne comme , modifiez sa propriété d'affichage en "inline-block" ou "block".

Inline-Block :

• Permet à l'élément de se comporte en ligne, mais active également les marges verticales.
• Exemple :

Bloc :

• Convertit l'élément en un élément de niveau bloc, autorisant des marges verticales et horizontales.
• Exemple :

Il est recommandé d'utiliser display: inline-block pour les éléments en ligne qui nécessitent des marges verticales, comme display: block peut faire apparaître l'élément sur une ligne séparée.

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!

css html for while require Property display margin

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn