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

Question

我曾在某个地方读到过，<img> 元素的行为类似于两者。如果正确，能否有人用示例解释一下？

- understack

Answer 1

没错，它们两个都是 - 或者更精确地说，它们是 "行内块级元素"。这意味着它们像文本一样在行内流动，但是也具有块级元素的宽度和高度。

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

图像和对象也称为“替换元素”，因为它们本身没有内容，元素实际上被二进制数据替换。

*请注意，浏览器在技术上使用display:inline（如开发人员工具中所见），但它们对图片进行特殊处理。它们仍然遵循inline-block的所有特性。

- DisgruntledGoat

---

我总是读到图像是内联元素而不是内联块，但是它们应该是内联块，因为可以添加宽度和高度这一点是有道理的。 - Donato

这个答案在技术上并不正确。准确来说，“img”元素并不是“inline-block”，而实际上是“inline”元素。您可以通过在现代浏览器中右键单击图像，点击“检查元素”，然后查看计算样式来检查这一点，其中将显示“display: inline”。标签内没有块级上下文发生，因此称其为“inline-block”是不正确的。有关替换内联元素的更多信息，请参见Quentin的答案和this MDN article。 - Maximillian Laumeister

@Max，该链接并未提到替换元素是内联的。 - DisgruntledGoat

@DisgruntledGoat，我发布的链接并没有说img元素是内联的 - Google Chrome开发者工具显示img元素是内联的。到目前为止，这篇文章是我找到的唯一一个说它们实际上是inline-block的地方。有趣的是，我也没有找到任何权威机构说它们是inline的。也许标签的处理方式取决于实现？ - Maximillian Laumeister

根据这里的内容，替换元素不在CSS格式模型的范围内。HTML或CSS规范中没有指定图像是行内元素。因此，无论浏览器将其视为何种元素，图像的处理方式都与设置为display:inline-block相同。 - DisgruntledGoat

Answer 2

一个 img 元素是一个替换的内联元素。

它的行为就像一个内联元素（因为它就是内联元素），但关于内联元素的一些概括不适用于 img 元素。

例如：

概括："宽度不适用于内联元素" 规范实际上说： "适用于所有元素，但不适用于非替换的内联元素、表格行和行组"

因为图像是替换的内联元素，所以它适用。

- Quentin

Answer 3

IMG元素是内联元素，这意味着除非它们被浮动，否则它们将水平流动，并与文本和其他内联元素一起显示。

它们是"块级"元素，因为它们有宽度和高度。但在这方面，它们更像是"内联块级"元素。

- Robusto

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

- Montana Flynn

Answer 5

每当您插入一张图片时，它只会保留原有宽度。您可以在其旁边添加任何其他HTML元素，您会发现该元素会被允许。这使图片成为“内联”元素。

- Avatar

Answer 6

没错，它们都是 - 更准确地说，它们是“内联块级元素”。这意味着它们像文本一样内联流动，但也像块级元素一样具有宽度和高度。

- Modaser Sadat

Answer 7

<img> 是一个替换元素；它默认具有内联的显示值，但其默认尺寸由嵌入图像的固有值定义，就像它是内联块一样。您可以在图像上设置诸如边框/边框半径、填充/边距、宽度、高度等属性。

替换元素：它们是元素，其内容不受当前文档样式的影响。替换元素的位置可以使用 CSS 影响，但不能影响替换元素本身的内容。

参考资料：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

- Ritu Raj Shrivastava

Answer 8

这被视为内联元素，因为它允许其他元素，包括自身，坐在同一行上。 它也可以具有一些块特性，如宽度和高度的样式设置。 但您可以通过将元素的CSS显示属性设置为“inline-block”来更改它。 也就是说： img {display:inline-block;}

- Fortunecode

Answer 9

在编程中，<p> 元素表现为 inline-block 元素，因为它允许其他图像与其在同一行内，即行内排列，并且可以更改图像的宽度和高度，这是块级元素的属性。因此，提供了行内元素和块级元素的特点。

- Ayushgupta

Answer 10

是一个内联元素...但在CSS中，您可以通过以下方式轻松更改它： img{display:inline-block;} 或 img{display:inline-block;} 或 img{display:inliblock;}

- ritik sharma