为什么宽度应用于具有嵌入式显示的按钮? [英] Why does width apply to a button with display inline?

问题描述

根据 MDN (是一个内联元素.

According to MDN, a button is an inline element.

但是，按钮元素具有带有display: inline-block的默认样式(请参见这个问题)

However, button elements have default styling with display: inline-block (See this question)

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

到目前为止一切都很好.

So far so good.

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

If I now set the button with display:inline - width still applies!!

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

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

现在，根据规范:不适用于内联元素(未替换)

Now, according to the spec: width does not apply to inline elements (which are non-replaced)

适用于:除不可替换的嵌入式元素，表行， 和行组

Applies to: all elements but non-replaced inline elements, table rows, and row groups

情况就是这样

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

Why does width still apply to an inline button element?

推荐答案

如注释中所述，我很确定这与特定于浏览器的呈现行为有关，就像表单元素的典型表现一样.我相信在按钮上设置display: inline时会发生什么……什么都没有.实际上，它与应用width属性的典型浏览器默认display: inline-block相同.

As mentioned in the comments, I'm pretty sure this has to do with browser-specific rendering behavior as is so typical of form elements. What I believe is happening when you set display: inline on the button is... nothing. Effectively, it's the same as the typical browser default display: inline-block, on which the width property does apply.

请参考第10.2节，其中介绍了width属性本身.特别说明了为什么width属性完全不适用于内联元素(或内联框)的原因:

Refer to section 10.2, which describes the width property itself. In particular it explains why exactly the width property does not apply to inline elements (or inline boxes):

此属性不适用于不可替换的内联元素.未替换的内联元素的框的内容宽度是其内已呈现内容的框的宽度(在子级的任何相对偏移之前).回想一下，内联框会流入线框.线框的宽度由其包含的块指定，但可能会因浮点数而缩短.

This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

简而言之，这是因为内联元素的内容位于行框中.线盒的宽度不能直接控制.它完全由包含块和任何附带的浮点决定.您可以在第9.4.2节中看到线框渲染的示例，它描述了内联格式设置上下文.

In short, it's because the content of inline elements resides in line boxes. The width of a line box cannot be controlled directly; it is determined entirely by the containing block and any incidental floats. You can see an example of line box rendering in section 9.4.2, which describes inline formatting contexts.

如果display: inline实际上使按钮呈现为嵌入式框，则

If display: inline actually made a button render as an inline box, all its contents would spill over and it would no longer look, or function, like a button. It makes sense to want to prevent that from happening, and I think that's just what browsers do.

那么，他们到底如何防止这种情况发生?按钮是替换元素吗?我不能肯定地说.但请注意，在第9.2.2节中，它表示:

So what exactly do they do to prevent this? Is a button a replaced element? I can't say for sure. But note, in section 9.2.2, it says:

不是内联框的内联级框(例如替换的内联级元素，内联块元素和内联表元素)被称为 atomic内联级框，因为它们参与它们的内联格式设置上下文作为单个不透明框.

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

第10节未明确提及原子内联级别框，但确实有一些部分用于计算内联替换元素以及内联块元素(无论是已替换还是未替换)的尺寸，所有这些元素均被视为原子内联为上文提到的.在所有这些情况下，如果width属性不是auto，则照常应用.

Section 10 does not explicitly mention atomic inline-level boxes, but it does have sections for calculating dimensions for inline replaced elements, as well as inline-block elements whether replaced or non-replaced, all of which are considered atomic inlines as mentioned above. In all of these cases, the width property applies as normal if it's not auto.

因此，尽管按钮是否为替换元素仍值得商,，但就此问题而言，这可能根本无关紧要.但是它仍然是某种原子内联元素，因为它仍然参与内联格式化上下文.但是，就其价值而言，如果您不设置宽度，它似乎会收缩以适合其内容，因此在这种情况下，其行为可能更接近于内联块.可以这样说，display的实际值变为inline-block，尽管这永远不会在开发人员工具中反映出来，因为计算值不会改变(再次出现特定于浏览器的渲染行为).

So, while it's still debatable whether or not a button is a replaced element, it probably doesn't matter at all for the purposes of this question. But it is still some kind of atomic inline element, since it still participates in an inline formatting context. For what it's worth, though, it appears to shrink to fit its contents if you don't set a width, so its behavior is probably closer to that of an inline-block in that case. One could say then that the actual value of display becomes inline-block, although this is never reflected in the developer tools because the computed value does not change (again a side effect of browser-specific rendering behavior).

这篇关于为什么宽度应用于具有嵌入式显示的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！