据我了解,内联元素通常无法使用CSS width和height属性来调整大小.内联img似乎是一个例外,您可以使用width和height调整其大小.
img {
display: inline;
height: 35px; // this works
}
我想了解这是否是img标签专用的东西,或者是否有其他细微差别可以使这项工作有效.
有人可以指出我一些描述此行为的规范或文档吗？
最佳答案
img是一个内联替换元素,与span不同,例如,它是一个内联非替换元素,我们可以在替换元素上定义宽度/高度.这是规范的相关部分,定义了高度/宽度的行为方式
原文链接：https://www.f2er.com/css/530703.htmlhttps://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height
对于非替换元素,您会发现：
The ‘width’ property does not apply. 07002
The ‘height’ property does not apply. 07003
同样的逻辑适用于转换,在转换中我们可以将转换应用于img而不是跨度.
相关：https://stackoverflow.com/a/54227332/8620333
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements
请注意,在the specification中,还说过内联块替换元素与内联替换元素完全相同,因此使img内联或内联块没有区别.
