L'élément <img> est-il au niveau du bloc ou au niveau en ligne?

163

J'ai lu quelque part que cet <img>élément se comporte comme les deux. Si c'est correct, quelqu'un pourrait-il expliquer avec des exemples?

html css image comprendre
la source

Réponses:

189

C'est vrai, ce sont les deux - ou plus précisément, ce sont des éléments "inline block". Cela signifie qu'ils coulent en ligne comme du texte, mais ont également une largeur et une hauteur comme des éléments de bloc.

En CSS, vous pouvez définir un élément sur display: inline-blockpour qu'il reproduise le comportement des images *.

Les images et les objets sont également appelés éléments «remplacés», car ils n'ont pas de contenu en soi, l'élément est essentiellement remplacé par des données binaires.

* Notez que les navigateurs utilisent techniquement display: inline (comme on le voit dans les outils de développement) mais ils accordent un traitement spécial aux images. Ils suivent toujours tous les traits de inline-block.

Chèvre mécontente
la source
J'ai toujours lu que les images sont des éléments en ligne, pas des blocs en ligne, mais il est logique qu'ils soient des blocs en ligne, en raison de la possibilité d'ajouter de la largeur et de la hauteur.
Donato
22
Cette réponse n'est pas techniquement correcte. Justement, les imgéléments ne sont pas inline-blockmais en réalité des inlineéléments. Vous pouvez vérifier cela dans un navigateur moderne en cliquant avec le bouton droit sur une image, en cliquant sur "Inspecter l'élément", puis en affichant le style calculé, qui s'affichera display: inline. Il n'y a pas de contexte de bloc à l'intérieur de la balise, il n'est donc pas correct de l'appeler inline-block. Pour plus d'informations sur les éléments en ligne remplacés, consultez la réponse de Quentin et cet article MDN .
Maximillian Laumeister
@Max ce lien ne dit rien sur les éléments remplacés étant en ligne.
DisgruntledGoat
@DisgruntledGoat Le lien que j'ai publié ne dit pas que les imgéléments sont en ligne - les outils de développement de Google Chrome montrent les imgéléments comme étant en ligne. Cet article est le seul endroit que j'ai trouvé jusqu'à présent qui indique qu'ils le sont à la inline-blockplace. Fait intéressant, je n'ai trouvé aucune autorité qui dit qu'ils le sont inlinenon plus. Est-ce que comment traiter la balise dépend de l'implémentation, peut-être?
Maximillian Laumeister
2
@Max Selon cela , les éléments remplacés sortent du cadre du modèle de formatage CSS. Rien dans les spécifications HTML ou CSS ne spécifie que les images sont en ligne. Ainsi, indépendamment de ce que dit le navigateur, les images sont traitées exactement comme elles ont été définies display:inline-block.
DisgruntledGoat
53

Un imgélément est un élément en ligne remplacé .

Il se comporte comme un élément en ligne (car c'est le cas), mais certaines généralisations sur les éléments en ligne ne s'appliquent pas aux imgéléments.

par exemple

Généralisation: "La largeur ne s'applique pas aux éléments en ligne"

Ce que dit réellement la spécification : "S'applique à: tous les éléments sauf les éléments en ligne, les lignes de tableau et les groupes de lignes non remplacés"

Puisqu'une image est un élément en ligne remplacé, elle s'applique.

Quentin
la source
13

Les éléments IMG sont en ligne, ce qui signifie qu'à moins qu'ils ne soient flottants, ils couleront horizontalement avec du texte et d'autres éléments en ligne.

Ce sont des éléments "blocs" en ce sens qu'ils ont une largeur et une hauteur. Mais ils se comportent plus comme des "blocs en ligne" à cet égard.

Robusto
la source
7

Pour presque toutes les raisons, considérez-les comme un élément en ligne avec une largeur définie. Fondamentalement, vous êtes libre de dicter comment vous souhaitez que les images s'affichent en utilisant CSS. Je définis généralement quelques classes d'images comme ceci:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}
Montana Flynn
la source
2

Chaque fois que vous insérez une image, elle prend juste la largeur d'origine de l'image. Vous pouvez ajouter n'importe quel autre élément html à côté et vous verrez qu'il le permettra. Cela fait de l'image un élément "en ligne".

Avatar
la source
0

C'est vrai, ce sont les deux - ou plus précisément, ce sont des éléments "inline block". Cela signifie qu'ils coulent en ligne comme du texte, mais ont également une largeur et une hauteur comme des éléments de bloc.

Modaser Sadate
la source