Est-ce que niveau de bloc d’élément ou niveau en ligne?

J’ai lu quelque part que l’élément se comporte comme les deux. Si c’est correct, est-ce que quelqu’un pourrait expliquer avec des exemples?

C’est vrai, ils sont tous les deux – ou plus précisément, ils sont des éléments “inline block”. Cela signifie qu’ils circulent en ligne comme du texte, mais qu’ils ont également la largeur et la hauteur comme des éléments de bloc.

En CSS, vous pouvez définir un élément à display: inline-block pour lui permettre de reproduire le comportement des images *.

Les images et les objects 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 binarys.

* Notez que les navigateurs utilisent techniquement l’ 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 du inline-block .

Un élément img est un replaced inline element .

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 éléments img.

par exemple

Généralisation: “La largeur ne s’applique pas aux éléments en ligne”

Que dit la spécification: “S’applique à: tous les éléments mais pas les éléments en ligne non remplacés, les lignes de tableau et les groupes de lignes”

Une image étant un élément intégré remplacé, elle s’applique.

Les éléments IMG sont en ligne, ce qui signifie qu’à moins qu’ils ne flottent, ils circulent horizontalement avec du texte et d’autres éléments en ligne.

Ce sont des éléments “bloquants” en ce sens qu’ils ont une largeur et une hauteur. Mais ils se comportent plus comme “inline-block” à cet égard.

Dans presque tous les cas, considérez-les comme un élément en ligne avec un jeu de largeur. Fondamentalement, vous êtes libre de dicter comment vous souhaitez que les images soient affichées en utilisant CSS. Je règle généralement quelques classes d’images comme suit:

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

Chaque fois que vous insérez une image, il suffit de prendre la largeur d’origine de l’image. Vous pouvez append tout autre élément HTML à côté de celui-ci et vous verrez qu’il le permettra. Cela fait de l’image un élément “inline”.