为什么宽度适用于内联显示的按钮？

Question

根据MDN，button 是一个内联元素。

但是，按钮元素有default styling 和display: inline-block（参见this question）

button, textarea,
input, select   { display: inline-block }

到目前为止一切顺利。

但是：

如果我现在用display:inline 设置按钮 - 宽度仍然适用！！

DEMO

button,
div {
  width: 200px;
  border: 1px solid red;
  display: inline;
}

<button>button</button>
<div>div</div>

现在，根据spec：width 不适用于内联元素（不可替换）

适用于：除非替换内联元素外的所有元素、表格行、 和行组

既然如此：

为什么宽度仍然适用于内联 button 元素？

Answer 1

正如 cmets 中提到的，我很确定这与特定于浏览器的呈现行为有关，这是表单元素的典型表现。当您在按钮上设置display: inline 时，我相信正在发生的事情是......什么都没有。实际上，它与典型的浏览器默认 display: inline-block 相同，width 属性确实适用。

请参阅section 10.2，它描述了width 属性本身。特别是它解释了为什么 width 属性不适用于内联元素（或内联框）：

此属性不适用于不可替换的内联元素。未替换的内联元素框的内容宽度是其中呈现的内容的宽度（在子元素的任何相对偏移之前）。回想一下，内联框流入行框。线框的宽度由它们的包含块给出，但可能会因浮动而缩短。

简而言之，这是因为内联元素的内容驻留在行框中。线框的宽度不能直接控制；它完全由包含块和任何附带的浮动决定。您可以在 section 9.4.2 中看到一个行框渲染示例，它描述了内联格式上下文。

如果display: inline 实际上将按钮渲染为内联框，all its contents would spill over 并且它看起来或功能都不再像按钮。想要阻止这种情况发生是有道理的，我认为这正是浏览器所做的。

那么他们究竟做了什么来防止这种情况发生呢？按钮是替换元素吗？我不能肯定地说。但请注意，在section 9.2.2 中，它说：

非行内框的行内层框（如替换行内层元素、行内块元素和行内表元素）被称为原子行内层框，因为它们参与将它们的内联格式化上下文作为单个不透明框。

第 10 节没有明确提到原子内联框，但它确实有用于计算内联替换元素以及内联块元素（无论是替换还是非替换）的维度的部分，所有这些都被视为原子内联上文提到的。在所有这些情况下，width 属性如果不是 auto，则照常适用。

因此，虽然按钮是否是被替换元素仍有争议，但对于这个问题而言，这可能根本不重要。但它仍然是 某种 原子内联元素，因为它仍然参与内联格式化上下文。但是，对于它的价值，如果您不设置宽度，它似乎会缩小以适应其内容，因此在这种情况下，它的行为可能更接近于内联块的行为。有人可以说display 的actual value 变成了inline-block，尽管这从未反映在开发人员工具中，因为计算的值不会改变（这也是浏览器特定渲染行为的副作用）。

Answer 2

由于像 Boltclock 一样，我认为没有简单的答案，这既是我对该主题的想法，也是答案，但我希望它会提供信息。

虽然 CSS display 属性表面上很简单，但它实际上包含了很多方面。 CSS 级别 3 草案规范 css-display 捕捉到了其中的一些复杂性，但似乎仍然没有充分涵盖它。

HTML5 规范说the rendering of <button> elements：

当按钮绑定应用于按钮元素时，该元素是 预期呈现为“内联块”框呈现为按钮 contents 是元素的内容。

inline-block 框有很多方面：

1。 inline-level 元素

这意味着它参与了行框中的内联格式化上下文。它与同一行上的其他元素按顺序流动。线框的内容可以与其容器上的text-align:center属性居中对齐，并且通过避免浮动元素来缩短线框。

2。应用width 属性，自动值为shrink-to-fit

与未替换的display:inline 元素不同，宽度值适用。但是，如果未指定宽度值，则会应用缩小以适应算法来确定宽度。这类似于浮动元素或display:table 元素，但与display:block 元素不同，display:block 元素在未指定宽度时尽可能宽。它也不同于被替换的内联元素和被替换的内联块元素，如果没有指定宽度，则使用它们的固有宽度（如果它们有），如果没有，则使用默认值 300px。 Shrink-to-fit 对于替换元素来说是一个没有意义的概念。

3。一个block-container 元素

块容器元素由一堆行框组成。内容从一个 line box 流到下一个 line box 并且 inline-block 元素的高度增长（可能溢出）以完全包含所有 line box。

4。基线是last contained line box 的基线

当 inline-block 元素包含多行时，其基线是这些行中的最后一行。这与浮动或display:table-cell 元素不同，它们也是收缩适合的块容器元素。浮点数超出正常流程，因此它们没有基线，display:table-cell 元素的基线是其 first 行框的基线。具有多行的按钮会根据最后一行框规则垂直对齐。

---

现在，这适用于默认显示设置。而HTML5的渲染要求意味着即使指定值为inline，按钮display的使用值为inline-block。但它不考虑指定值为block 时的行为。在这种情况下，元素前后都有一个换行符，margin:auto 使框居中，就像display:block 元素一样，而不是inline-block 所期望的。

但是，对于指定值 auto，它的宽度像 inline-block 一样收缩以适应，而 display:block 的预期行为是尽可能宽的。据我所知，唯一表现类似的显示值是display:table，但没有其他任何迹象表明正在使用display:table。

所以在规范中我找不到与此完全匹配的内容。我们只能希望当 css-display 规范完成时，它会涵盖这种行为。

Answer 3

有两种元素。

1. 不可替换的元素
2. 替换元素

Button 属于替换元素类别。

您可以在下面的链接中找到更多信息。

• Littlewebhut
• SitePoint

所以，对于button，根据spec，就对了。

内联、不可替换的元素

width 属性不适用。 margin-left 或 margin-right 的计算值 auto 成为 0 的使用值。

内联、替换元素 （本节适用于button）

margin-left 或 margin-right 的计算值 auto 成为 0 的使用值。

如果height 和width 都具有auto 的计算值，并且该元素还具有内在width，则内在width 是width 的使用值。

如果height 和width 都具有auto 的计算值，并且该元素没有内在width，但确实具有内在height 和内在比率；或者如果width 的计算值为auto，height 有其他一些计算值，并且该元素确实具有内在比率；那么width的使用值为：

 (used height) * (intrinsic ratio)

如果height 和width 都具有auto 的计算值，并且元素具有内在比率但没有内在height 或width，则width 的使用值在CSS 2.1。但是，建议如果包含块的width 本身不依赖于被替换元素的width，则width 的使用值是根据用于块级非替换元素的约束方程计算的正常流动。

如果width 的计算值为auto，并且元素具有内在width，则内在width 是width 的使用值。

如果width 的计算值为width，但以上条件均不满足，则width 的使用值变为300px。但是，如果300px 太宽而无法容纳设备，UA 应该使用最大矩形的width，它有 2:1 的比例并且适合设备。