CSS-为什么高度在嵌入式img元素上起作用

据我了解,内联元素通常无法使用CSS width和height属性来调整大小.内联img似乎是一个例外,您可以使用width和height调整其大小.

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

我想了解这是否是img标签专用的东西,或者是否有其他细微差别可以使这项工作有效.

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

最佳答案

img是一个内联替换元素,与span不同,例如,它是一个内联非替换元素,我们可以在替换元素上定义宽度/高度.这是规范的相关部分,定义了高度/宽度的行为方式

https://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. ⁰⁷⁰⁰²

The ‘height’ property does not apply. ⁰⁷⁰⁰³

同样的逻辑适用于转换,在转换中我们可以将转换应用于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内联或内联块没有区别.

原文地址：https://www.jb51.cc/css/530703.html