按钮是一个内联元素，但宽度有效吗? [英] button is an inline element but width is working?

问题描述

按钮是一个内联元素，但是宽度属性起作用，为什么呢?

Button is an inline element, but the width properties work on it, how come?

button {
    width: 300px;
}

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

推荐答案

大多数浏览器默认将button元素显示为inline-block(根据(非标准))

Most browsers display button elements as inline-block by default, according to the (not normative) Appendix D. Default style sheet for HTML 4.

因此，您可以期望width属性正常工作，如

Therefore, you could expect the width property to work, as described in Calculating widths and margins - Inline-block, non-replaced.

但是，不仅如此. button元素是已替换的元素:

But it's not just that. button elements are replaced elements:

在CSS中，被替换的元素是表示为 不在CSS范围内.这些是外部对象，其 表示形式独立于CSS.

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS.

因此，它们有一些特殊的行为.例如，根据

Therefore, they have some special behavior. For example, independently of whether they have display: inline-block or display: inline, they are sized respecting the width property, according to Calculating widths and margins - Inline, replaced.

值得注意的是，HTML5始终将它们强制显示为inline-block. 10.5.2绑定-button元素:

It's worth noting that HTML5 forces them to be displayed as inline-block anyways. This is explained in 10.5.2 Bindings - The button element:

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

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

When the button binding applies to a button element, the element is expected to render as an 'inline-block' box rendered as a button whose contents are the contents of the element.

这篇关于按钮是一个内联元素，但宽度有效吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！