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

我读过<img>元素的行为像两个。 如果正确,有人可以请示例解释吗?

确实,它们都是 – 或者更确切地说,它们是“内联块”元素。 这意味着它们像文本一样内联,而且像块元素一样具有宽度和高度。

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

图像和对象也被称为“replace”元素,因为它们本身没有内容,元素基本上被二进制数据替代。

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

img元素是replaced inline element

它的行为就像一个内联元素(因为是这样),但是对内联元素的一些概括不适用于img元素。

例如

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

规范的实际内容是:“适用于:所有元素,但未被replace的行内元素,表行和行组”

由于图像是被replace的内联元素,因此它适用。

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

他们是“块”元素,因为他们有宽度和高度。 但是在这方面他们的行为更像是“内联阻断”。

几乎所有的目的都认为它们是一个宽度设置的内联元素。 基本上,您可以自由决定如何使用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;} 

每当你插入一个图像,它只需要图像原来的宽度。 你可以添加任何其他的HTML元素旁边,你会看到它将允许它。 这使图像成为“内联”元素。