<img>元素块级别还是内联级别？

Question

我已经在某个地方读过这个<img>元素的行为.如果正确,有人可以用例子解释一下吗？

Answer 1

确实,它们都是 - 或者更准确地说,它们是"内联块"元素.这意味着它们像文本一样以内联方式流动,但也具有像块元素一样的宽度和高度.

在CSS中,您可以设置元素display: inline-block以使其复制图像的行为*.

图像和对象也称为"替换"元素,因为它们本身没有内容,该元素基本上被二进制数据替换.

*请注意,浏览器在技术上使用display: inline(如开发人员工具中所示),但它们对图像进行了特殊处理.他们仍然遵循所有特征inline-block.

Answer 2

一个img元件是一个replaced inline element.

它的行为类似于内联元素(因为它是),但有关内联元素的一些概括不适用于img元素.

例如

泛化:"宽度不适用于内联元素"

规范的实际内容是:"适用于:所有元素,但未替换的内联元素,表行和行组"

由于图像是替换的内联元素,因此它确实适用.

Answer 3

IMG元素是内联的,这意味着除非它们是浮动的,否则它们将与文本和其他内联元素水平流动.

它们是"块"元素,因为它们具有宽度和高度.但在这方面,他们的行为更像是"内联阻止".

Answer 4

几乎所有目的都将它们视为具有宽度设置的内联元素.基本上,您可以自由决定如何使用CSS显示图像.我通常设置几个图像类,如下所示:

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