Html <img> 元素是块级还是内联级？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2402761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is <img> element block level or inline level?
提问by understack
I've read somewhere that <img>element behaves like both. If correct, could someone please explain with examples?
我在某处读到过，<img>元素的行为与两者都一样。如果正确，有人可以用例子解释一下吗？
回答by DisgruntledGoat
It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.
的确，它们都是——或者更准确地说，它们是“内联块”元素。这意味着它们像文本一样内联流动，但也像块元素一样具有宽度和高度。
In CSS, you can set an element to display: inline-blockto make it replicate the behaviour of images*.
在 CSS 中，您可以设置一个元素display: inline-block以使其复制图像的行为*。
Images and objects are also known as "replaced" elements, since they do not have content per se, the element is essentially replaced by binary data.
图像和对象也称为“替换”元素，因为它们本身没有内容，元素本质上被二进制数据替换。
* Note that browsers technically use display: inline(as seen in the developer tools) but they are giving special treatment to images. They still follow all traits of inline-block.
* 请注意，浏览器在技术上使用display: inline（如开发人员工具中所示），但它们对图像进行了特殊处理。他们仍然遵循 的所有特征inline-block。
回答by Quentin
An imgelement is a replaced inline element.
一个img元件是取代内联元素。
It behaves like an inline element (because it is), but some generalizations about inline elements do not apply to imgelements.
它的行为就像一个内联元素（因为它是），但是一些关于内联元素的概括不适用于img元素。
e.g.
例如
Generalization: "Width does not apply to inline elements"
概括：“宽度不适用于内联元素”
What the spec actually says: "Applies to: all elements but non-replaced inline elements, table rows, and row groups "
什么规范竟说：“适用于：所有元素，但非替换行内元素，表格行和行组”
Since an image is a replaced inline element, it does apply.
由于图像是替换的内联元素，因此它确实适用。
回答by Robusto
IMG elements are inline, meaning that unless they are floated they will flow horizontally with text and other inline elements.
IMG 元素是内联的，这意味着除非它们是浮动的，否则它们将与文本和其他内联元素一起水平流动。
They are "block" elements in that they have a width and a height. But they behave more like "inline-block" in that respect.
它们是“块”元素，因为它们具有宽度和高度。但在这方面，它们的行为更像是“内联块”。
回答by Montana Flynn
For almost all purposes think of them as an inline element with a width set. Basically you are free to dictate how you would like images to display using CSS. I generally set a few image classes like so:
对于几乎所有目的，都可以将它们视为具有宽度设置的内联元素。基本上，您可以使用 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;}
回答by Avatar
Whenever you insert an image it just takes the width that the image has originally. You can add any other html element next to it and you will see that it will allow it. That makes image an "inline" element.
每当您插入图像时，它只采用图像最初的宽度。你可以在它旁边添加任何其他 html 元素，你会看到它会允许它。这使得图像成为“内联”元素。
回答by Modaser Sadat
It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.
的确，它们都是——或者更准确地说，它们是“内联块”元素。这意味着它们像文本一样内联流动，但也像块元素一样具有宽度和高度。
