Les éléments en ligne manquent-ils vraiment de propriétés « margin-top » et « margin-bottom » ?

Remplissage pour les éléments en ligne

En ce qui concerne les propriétés des éléments en ligne, une question courante se pose concernant le remplissage et les marges. Selon certaines sources, les éléments en ligne ont des propriétés de remplissage complètes mais manquent de propriétés margin-top et margin-bottom, n'ayant que margin-left et margin-right.

Où trouver les déclarations officielles spécifiques aux marges

Où trouver les déclarations officielles spécifiques aux marges

Premièrement, cette affirmation n'est pas une déclaration définitive trouvée dans les normes W3. Cependant, le modèle de boîte indique que margin-top et margin-bottom "n'ont aucun effet sur les éléments en ligne non remplacés".

Comprendre "Aucun effet" pour les propriétés de marge

« Aucun effet » dans ce contexte n'implique pas l'absence de propriétés. Au lieu de cela, cela signifie que ces propriétés n'affectent pas la position des éléments en ligne. Cependant, ils existent à des fins d'héritage.

Exemple : Héritage des propriétés de marge

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

<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>

Considérez le code suivant :

Dans Dans cet exemple, les marges de la deuxième ligne sont héritées de la plage parent en raison de la règle .two. Ce comportement consistant à hériter des valeurs de marge des éléments contenant démontre que les propriétés margin-top et margin-bottom existent, même si elles n'affectent pas directement le positionnement des éléments en ligne comme le texte.

Propriétés de remplissage pour Inline Éléments

Bien que les éléments en ligne aient des propriétés de remplissage complètes, padding-top et padding-bottom peuvent ne pas affecter le texte environnant comme prévu. En effet, les éléments en ligne n'ont pas intrinsèquement de hauteur définie par défaut. Par conséquent, la définition de padding-top ou padding-bottom ne peut pas modifier visuellement la taille ou la position de l'élément par rapport au texte qui l'entoure.

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!