Comment le remplissage fonctionne-t-il réellement pour les éléments en ligne en CSS ?

Padding pour les éléments en ligne : une exploration

Le concept de remplissage pour les éléments en ligne a souvent prêté à confusion, notamment en ce qui concerne leur interaction avec la marge. propriétés. Dans cet article, nous approfondirons les spécificités du remplissage d'éléments en ligne et aborderons les idées fausses courantes. les éléments ont des propriétés de remplissage complètes, ce n'est pas tout à fait exact. Bien que les éléments en ligne puissent effectivement avoir un remplissage, ils n'ont pas la possibilité d'appliquer des marges verticales (supérieures et inférieures). La spécification CSS indique explicitement que ces propriétés n'ont "aucun effet" sur les éléments en ligne non remplacés.

Héritage et non-effets de la marge

Cependant, "non effet" n'implique pas que les propriétés n'existent pas. Ils sont simplement ignorés lorsqu'ils sont directement appliqués aux éléments en ligne. Néanmoins, ils jouent un rôle dans l’héritage. Comme le montre l'exemple suivant, les marges peuvent être héritées et appliquées aux éléments de bloc lorsqu'ils sont utilisés comme enfants :

Le mystère du remplissage vertical

p { border: 1px solid red; }
i { vertical-align: top; }
span { margin-top: 20px; margin-bottom: 20px; }
b { display: inline-block; }
.two { margin: inherit; }

Une autre idée fausse courante est que les éléments en ligne ne peuvent pas accepter le remplissage vertical. S'il est vrai que padding-top et padding-bottom peuvent sembler inefficaces pour le contenu textuel, ils affectent les éléments environnants. Dans votre exemple, le remplissage autour du texte « bonjour » n'est pas visible car il pousse le texte de haut en bas, mais le texte lui-même reste dans la ligne d'origine.

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

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!