为什么宽度/高度在嵌入式img元素上起作用 [英] Why does width/height work on an inline img element

问题描述

据我了解，通常不能使用CSS width 和 height 属性来调整内联元素的大小。内联 img 似乎是一个例外，您可以使用 width 和<$ c调整其大小。 $ c> height 。

It is my understanding that inline elements can't usually be sized using CSS width and height properties. It seems that an inline img is an exception to this, and that you can resize it using width and height.

img {
  display: inline;
  height: 35px; // this works
}

我想了解这是否专门用于 img 标记，或者是否有其他细微差别可以使这项工作生效。

I'd like to understand if this is something specialized to an img tag, or if there is some other nuance that makes this work.

有人可以指出我的意思吗？规范或描述此行为的文档？

Can someone point me towards some spec or documentation that describes this behavior?

推荐答案

一个 img 是一个内联已替换元素不同于 span ，例如，内联不可替换元素，我们可以在替换的元素。这是定义高度/宽度行为的规范的相关部分

an img is an inline replaced element unlike span for example which is an inline non-replaced element and we can define width/height on replaced element. Here is the relevant part of the specification that define how height/width should behave

https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

https://www.w3.org/TR/CSS2 /visudet.html#inline-replaced-height

对于不可替换元素，您会发现：

'width'属性不适用。 ^参考

'height'属性不适用。 ^参考

The 'height' property does not apply. ^ref

---

相同的逻辑适用于转换，我们可以将转换应用于 img 而不是 span 。

相关： CSS转换不适用于内联元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

https://html.spec.whatwg.org/multipage/ rendering.html＃replaced-elements

请注意，在规范也有人说inline-block代替了eleme nt与内联替换元素完全相同，因此将img设置为 inline 或 inline-block 不会有任何区别。

Note that in the specification it's also said that inline-block replaced element are exactly the same as inline replaced element so setting inline or inline-block to the img will make no difference.

这篇关于为什么宽度/高度在嵌入式img元素上起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！