按钮是内联元素但宽度是否有效？

Question

Button是一个内联元素,但宽度属性适用于它,为什么会这样？

button {
    width: 300px;
}

<button>asdfsdf</button>
<button>234234d</button>

Answer 1

大多数浏览器默认显示button元素inline-block,根据(不是规范性的)附录D. HTML 4的默认样式表.

因此,您可以预期该width属性可以工作,如计算宽度和边距 - 内联块,未替换.

但不只是这样.button元素被替换元素:

在CSS中,替换元素是其表示在CSS范围之外的元素.这些是外部对象,其表示独立于CSS.

因此,他们有一些特殊的行为.例如,根据它们是否具有display: inline-block或者display: inline,它们的大小取决于width属性,根据计算宽度和边距 - 内联,替换.

值得注意的是HTML5强制它们inline-block无论如何都要显示出来.这在10.5.2 Bindings中button解释- 元素:

@namespace url(http://www.w3.org/1999/xhtml);
button { binding: button; }

当按钮绑定应用于button元素时,该元素应呈现为"内联块"框,呈现为按钮,其内容是元素的内容.

Answer 2

请参阅W3C 参考（HTML4 元素的默认 CSS 样式列表）。

button是一个inline-block可以有集合的元素（默认情况下） ，与elementswidth相反。inline