blocks|key|1339958|text|这是真的，它们都是--或者更准确地说，它们是“内联块”元素。这意味着它们像文本一样在内联中流动，但也像块元素一样具有宽度和高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1339959|在CSS中，您可以将元素设置为display:+inline-block，使其复制图像的行为*。|offset|length|style|CODE|1339960|图像和对象也被称为“替换”元素，因为它们本身没有内容，因此该元素本质上是由二进制数据替换的。|1339961|*请注意，浏览器在技术上使用display:+inline+(如开发人员工具中所示)，但它们对图像进行了特殊处理。他们仍然遵循inline-block的所有特征。|1339962|entityMap^0|0|F|L|0|0|E|F|1R|C|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|M|$]]

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 <code>display: inline-block</code> to make it replicate the behaviour of images*.

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 <code>display: inline</code> (as seen in the developer tools) but they are giving special treatment to images. They still follow all traits of <code>inline-block</code>.

blocks|key|1340032|text|img元素是替换的内联元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1340033|它的行为类似于内联元素(因为它确实是)，但是关于内联元素的一些概括并不适用于img元素。|1340034|例如：|1340035|泛化：“宽度不适用于行内元素”|1340036|the+spec+actually+says：“适用于:除未替换的内联元素、表行和行组之外的所有元素”|1340037|由于图像是替换的内联元素，因此它确实适用。|1340038|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/CSS2/visudet.html#the-width-property^0|0|3|0|12|3|0|0|0|0|M|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|14|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|N|3|O|5|6|7|19|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

An <code>img</code> element is a replaced inline element.

It behaves like an inline element (because it is), but some generalizations about inline elements do not apply to <code>img</code> elements.

e.g. 

Generalization: "Width does not apply to inline elements"

What <a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property" rel="noreferrer">the spec actually says</a>: "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.

blocks|key|1339994|text|IMG元素是内联的，这意味着除非它们是浮动的，否则它们将与文本和其他内联元素一起水平流动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1339995|它们是“块”元素，因为它们有宽度和高度。但在这方面，它们的行为更像是“内联块”。|1339996|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

IMG elements are inline, meaning that unless they are floated they will flow horizontally with text and other inline elements.

They are "block" elements in that they have a width and a height. But they behave more like "inline-block" in that respect.

blocks|key|1340057|text|对于几乎所有的目的，都可以将它们看作是一个设置了宽度的内联元素。基本上，您可以使用CSS自由地指定图像的显示方式。我通常设置一些图像类，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340058|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;}|code-block|syntax|javascript|1340059|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>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;}
</code></pre>

blocks|key|2748991|text|每当您插入图像时，它只占用图像最初的宽度。您可以在它旁边添加任何其他html元素，您将看到它将允许这样做。这使得图像成为一个“内联”元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2748992|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|189199|text|这是真的，它们都是--或者更准确地说，它们是“内联块”元素。这意味着它们像文本一样在内联中流动，但也像块元素一样具有宽度和高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|189200|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|189133|text|<img>是一个被替换的元素；默认情况下，它的显示值是inline，但它的默认尺寸是由嵌入图像的内部值定义的，就像它是inline-block一样。您可以在图像上设置诸如边框/边框半径、填充/边距、宽度、高度等属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|189134|替换了元素：这些元素的内容不受当前文档样式的影响。使用CSS可以影响被替换元素的位置，但不能影响被替换元素本身的内容。|BOLD|189135|参考资料：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img|189136|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img^0|0|5|0|0|5|0|5|1P|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|K|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<code>&lt;img&gt;</code> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.
Replaced elements : They're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.
Referenece : <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img</a>

blocks|key|937534|text|它的行为类似于的内联块元素，因为它允许其他图像在同一行中，也就是内联，我们还可以改变图像的宽度和高度，这是块元素的属性。因此，同时提供内联元素和块元素的功能。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|937535|entityMap^0|7|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

behaves as an inline-block element as it allows other images in same line i.e. inline and also we can change the width and height of the image and this is the property of a block element.
Hence, provide both the features of inline and block elements.

blocks|key|1340249|text|被认为是内联元素，因为它允许包括自身在内的其他元素也位于同一行中。它还可以有一些块功能，如宽度和高度的样式。但是您可以通过将CSS中元素的display属性设置为'inline-block‘来更改它。即:+img+{display:inline-block;}|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340250|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The is considered as an inline element because it allows other elements including itself too sit on the same line.
It can also have some block features like styling of the width and height.
But you can change it by setting the display property of the element in CSS to 'inline-block'.
That is:
img {display:inline-block;}

blocks|key|937519|text|是css中的内联元素块，您可以通过以下方式更改它：-img{+..but+:+inline+-block；}或img{display:inline-block;}或img{display:inliblock;}|type|unstyled|depth|inlineStyleRanges|entityRanges|data|937520|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

is an inline element ..but in css you can change it simply by:-
img{display:inline-block;}
or
img{display:inline-block;}
or
img{display:inliblock;}

I've read somewhere that <code>&lt;img&gt;</code> element behaves like both. If correct, could someone please explain with examples?

Is <img> element block level or inline level?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在某处读到过，<img>元素的行为两者都类似。如果正确的话，有没有人可以举例说明？

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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