为什么宽度/高度在嵌入式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屋!