<Img> est-il un niveau de bloc d'élément ou un niveau en ligne?
J'ai lu quelque part que <img> élément se comporte comme les deux. Si correct, quelqu'un pourrait-il s'il vous plaît expliquer avec des exemples?
C'est vrai, ce sont les deux - ou plus précisément, ce sont des éléments de "blocs en ligne". Cela signifie qu’ils s’écoulent en ligne comme du texte, mais qu’ils ont une largeur et une hauteur similaires à celles des éléments de bloc.
En CSS, vous pouvez définir un élément sur display: inline-block pour le faire reproduire le comportement des images *.
Les images et les objets sont également appelés éléments "remplacés", puisqu'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 particulier aux images. Ils suivent toujours tous les traits de inline-block.
Un élément img est un replaced inline element.
Il se comporte comme un élément inline (parce que c'est le cas), mais certaines généralisations relatives aux éléments inline ne s'appliquent pas aux éléments img.
par exemple.
Généralisation: "La largeur ne s'applique pas aux éléments en ligne"
Ce que la spécification dit réellement: "S'applique à: tous les éléments sauf les éléments en ligne non remplacés, les rangées de tableaux et les groupes de rangées"
Puisqu'une image est un élément en ligne remplacé, elle s'applique.
Les éléments IMG sont en ligne, ce qui signifie que s'ils ne sont pas flottants, ils se dérouleront 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 davantage comme des "blocs alignés" à cet égard.
Pour presque tous les objectifs, considérez-les comme un élément en ligne avec un ensemble de largeur. En gros, vous êtes libre de dicter comment vous souhaitez que les images s'affichent à l'aide de CSS. Je règle 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;}
Chaque fois que vous insérez une image, sa largeur correspond à celle de l'image d'origine. 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 "inline".