Définition de la largeur des éléments en ligne

Question

Vous pouvez définir la largeur des éléments en ligne comme <span> , <em> y <strong> mais vous ne remarquerez aucun effet tant que vous ne les aurez pas positionnés.

a) Je pensais que la largeur d'un élément en ligne ne pouvait pas être définie ?

b) En supposant que la largeur puisse être définie, nous ne remarquerons aucun effet (donc la largeur que nous spécifions) jusqu'à ce que nous positionnions l'élément en ligne. Positionner comment/où ?

c) Pourquoi la largeur des éléments en ligne n'est-elle apparente que lorsque nous les "positionnons" ?

Answer 1

Il y a aussi la possibilité de affichage : inline-block qui pourrait vous donner le meilleur des deux mondes.

Answer 2

A) La largeur d'un élément en ligne est ignorée.

b,c) Lorsque vous "positionnez" un élément en ligne (je suppose que cela signifie utiliser la fonction position:absolue ), vous en faites en fait un élément de bloc, dont la largeur est interprétée par le navigateur.

Answer 3

Comme d'autres l'ont mentionné, la définition de la largeur (ou d'une autre propriété liée à la position) d'un élément en ligne fera en sorte que le navigateur affiche l'élément comme un élément de bloc.

Vous pouvez déclarer explicitement ce type de comportement en utilisant la balise CSS display propriété. Les paramètres les plus courants sont display: inline (par défaut), display: block y display: none .
Une référence complète pour le display la propriété est disponible ici .

Toutefois, il convient de noter que le Spécification HTML 4.01 décourage l'utilisation de "l'interprétation conventionnelle des éléments HTML" :

Les feuilles de style permettent de spécifier le rendu d'éléments arbitraires arbitraires, y compris si un élément est rendu en bloc ou en ligne. Dans certains cas, comme un style en ligne pour les éléments de liste, cela peut être approprié, mais de manière générale les auteurs ne sont pas encouragés à remplacer l'interprétation conventionnelle des éléments HTML dans cette manière.

Answer 4

Cela signifie essentiellement que si vous appliquez position: absolute à un élément en ligne, il deviendra un élément de bloc et gagnera en largeur.

Answer 5

Je pense que c'est dû au fait que lorsque vous spécifiez des attributs de position pour un élément "en ligne", l'élément n'est plus affiché. en ligne et est traité comme un élément de niveau bloc.