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

的确，它们都是——或者更确切地说，它们是“ inline block”元素。这意味着它们像文本一样以内联方式流动，但也像块元素一样具有宽度和高度。

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

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

* 请注意，浏览器在技术上使用 display: inline(如在开发人员工具中看到的) ，但是他们对图像给予了特殊的处理。它们仍然遵循 inline-block的所有特征。

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

它们是“块”元素，因为它们具有宽度和高度。但在这方面，它们的行为更像是“内联阻塞”。

img元素是 替换的嵌入式元件。

它的行为类似于内联元素(因为它就是内联元素) ，但是有关内联元素的一些泛化不适用于 img元素。

例如:。

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

什么 说明书上说: “适用于: 除了未替换的内联元素、表行和行组之外的所有元素”

由于图像是替换的行内元素，因此它确实适用。

对于几乎所有的目的来说，都可以将它们看作是一个带有宽度设置的内联元素。基本上，您可以自由决定如何使用 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 元素，您将看到它将允许这样做。这使得 image 成为一个“ inline”元素。

的确，它们都是——或者更确切地说，它们是“ inline block”元素。这意味着它们像文本一样以内联方式流动，但也像块元素一样具有宽度和高度。

是一个内联元素. . 但是在 css 中你可以通过:-来改变它 Img { display: inline-block; } 或者 Img { display: inline-block; } 或者 Img { display: inliblock; }

表现为一个 行内阻塞元素，因为它允许其他图像在同一行，即内联，我们也可以改变图像的宽度和高度，这是一个块元素的属性。 因此，同时提供内联元素和块元素的特性。

<img>是一个替换的元素; 默认情况下它的显示值是内联的，但是它的默认尺寸是由嵌入图像的内部值定义的，就像它是内联块一样。您可以设置图像的属性，如边框/边框-半径、空白/边距、宽度、高度等。

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

参考文献: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

它被认为是一个内联元素，因为它允许包括它自己在内的其他元素也位于同一行上。 它还可以具有一些块特性，比如宽度和高度的样式。 但是您可以通过将 CSS 中元素的 display 属性设置为‘ inline-block’来更改它。 那就是: Img { display: inline-block; }