Html 为什么宽度应用于内嵌显示的按钮？

根据，按钮是一个内联元素

但是，按钮元素具有with

display:inline block

（请参阅）

到目前为止还不错

然而： 如果我现在用

display:inline

设置按钮，则宽度仍然适用

按钮，
div{
宽度：200px；
边框：1px纯红；
显示：内联；
}

按钮
div

如评论中所述，我很确定这与特定于浏览器的呈现行为有关，这是表单元素的典型表现。当您在按钮上设置

display:inline

时，我相信正在发生的是。。。没有什么。实际上，它与典型的浏览器默认值

显示：内联块

相同，

宽度

属性确实适用于该块

请参阅，其中描述了

width

属性本身。特别是它解释了为什么

width

属性不适用于内联元素（或内联框）：

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

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

如果

display:inline

实际上将按钮渲染为内联框，那么它的外观或功能将不再像按钮一样。想要阻止这种情况发生是有道理的，我认为浏览器就是这么做的

那么他们到底做了什么来防止这种情况呢？按钮是被替换的元件吗？我不能肯定。但请注意，在中，它说：

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

第10节没有明确提到原子内联级别框，但它有一些章节用于计算内联替换元素的尺寸，以及内联块元素（无论是否替换），所有这些元素都被视为原子内联，如上所述。在所有这些情况下，

width

属性如果不是

auto

，则会正常应用

---

因此，尽管按钮是否为替换元素仍有争议，但就这个问题而言，它可能根本不重要。但它仍然是某种原子内联元素，因为它仍然参与内联格式上下文。不过，值得一提的是，如果不设置宽度，它似乎会收缩以适应其内容，因此在这种情况下，它的行为可能更接近内联块。有人可能会说，

display

的属性变成了

inline block

，尽管这一点从未在开发工具中反映出来，因为计算值没有改变（这也是特定于浏览器的渲染行为的副作用）。

因为像Boltclock一样，我认为没有简单的答案，这既是我对这个问题的回答，也是我对这个问题的想法，但我希望它能提供信息

尽管CSS显示属性表面上非常简单，但实际上它包含许多方面。csslevel3draft规范捕获了一些这种复杂性，但似乎仍然没有充分涵盖它

HTML5规范规定：

当按钮绑定应用于按钮元素时，该元素为 应渲染为“内联块”框，渲染为按钮 内容是元素的内容

内联块

框有许多方面：

1.元素 这意味着它参与行框内的内联格式上下文。它与同一行上的其他元素按顺序流动。行框的内容可以与其容器上的

text align:center

属性居中对齐，行框可以通过避免浮动元素而缩短

2.应用属性，自动值为 与未替换的

display:inline

元素不同，宽度值适用。但是，如果未指定宽度值，则会应用“收缩到拟合”算法来确定宽度。这类似于浮动元素，或

display:table

元素，但不同于

display:block

元素，如果未指定宽度，则这些元素的宽度尽可能大。它也不同于替换的内联元素和替换的内联块元素，如果没有指定宽度，则使用其固有宽度（如果有），如果没有，则使用默认值300px。“收缩到适合”对于替换的元素来说是一个毫无意义的概念

3.元素 块容器元素由一堆行框组成。内容从一个行框流向下一个行框，内联块元素的高度会增加（可能会溢出），以完全包含所有行框

4.基线是项目的基线 当内联块元素包含多行时，其基线是这些行中的最后一行。这与浮动或

显示不同：表格单元格
元素也是收缩以适应的块容器元素。浮动在正常流之外，因此它们没有基线，这意味着
display:table cell
元素有一个基线，即它们的第一行框的基线。具有多行的按钮不会根据最后一行框规则垂直对齐。

现在，对于默认的显示设置来说，这很好。以及
button, textarea,
input, select   { display: inline-block }

 (used height) * (intrinsic ratio)