html - 为什么即使我们明确地内联按钮的高度也可以指定？

Question

我们无法设置内联元素的宽度和高度，但即使我将button'display属性设置为inline，我仍然可以设置它的高度。一些答案说它是因为它是一个replaced元素，但似乎没有任何共识是否被替换。

另外，我们可以设置所有替换元素的高度/宽度，即使它们是内联的？

标签： htmlcss

Answer 1

HTML5 规范现在有一个关于按钮布局的完整部分

有时它被视为替换元素，有时则被视为 inline-block 元素。但它从未被视为不可替换的内联元素。

详细地说，它说：

按钮布局如下：

'display' 属性的作用如下：

如果 'display' 的计算值是 'inline-grid'、'grid'、'inline-flex' 或 'flex'，则表现为计算值。

否则，如果“display”的计算值是外部显示类型为“inline”的值，则表现为“inline-block”。

否则，表现为“流根”。

...

如果元素是绝对定位的，那么出于 CSS 视觉格式化模型的目的，就好像该元素是一个被替换的元素一样。[CSS]

如果 'inline-size' 的计算值是 'auto'，则使用的值是 fit-content 内联大小。

就 'align-self' 属性的 'normal' 关键字而言，就像元素是替换元素一样。

...