Question

我只是有一个容器，如div或button，其中包含内嵌元素，填充 - 容器不会增长适合内联元素。

button, div {
  background: blue;
}

span {
  background: orange;
  /*display: inline-block; */ /* toggle to see container element grow */
  padding: 4em;
}

hr {
  margin:100px;
}

<div>
    <span class="btn__content">
        I'm div inline content
    </span>
</div>

<hr>

<button class="btn" type="button">
    <span>
        I'm button inline content
    </span>
</button>

为什么会这样？

NB：我不是在寻找修复 - （例如，我已经知道我可以在容器上display:flex了容器扩展到内容）

相反，我正在寻找一个来自可靠来源的解释，例如解释内联元素行为的规范。

Answer 1

我相信这是因为这两部分：

9.4.2 Inline formatting contexts

线框的高度由线高计算部分中给出的规则确定。
10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

计算行框中每个内联级别框的高度。对于替换元素，内联块元素和内联表元素，这是其边距框的高度;对于内联盒子，这是他们的“线高”。

设置行高会改变包含框的高度

button, div {
  background: blue;
}

span {
  background: orange;
  /*display: inline-block; */ /* toggle to see container element grow */
  padding: 4em;
  line-height: 8em;
}

hr {
  margin:100px;
}

<div>
    <span class="btn__content">
        I'm div inline content
    </span>
</div>

<hr>

<button class="btn" type="button">
    <span>
        I'm button inline content
    </span>
</button>

Answer 2

原因在Visual Formatting model documentation（强调我的）中解释：

在内联格式化上下文中，框是水平布局的，一个   在另一个之后，从包含块的顶部开始。   这些之间会考虑水平边距，边框和填充   框。盒子可以以不同的方式垂直对齐：它们   底部或顶部可以对齐，或者其中的文本基线   可以对齐。包含形成框的矩形区域   一条线称为线框。

线框的宽度由包含块和   浮子的存在。 线框的高度由。确定   关于线高计算一节中给出的规则。

然后将line height计算为：

线框的高度确定如下：


计算行框中每个内联级别框的高度。对于   替换元素，内联块元素和内联表元素，   这是他们边缘盒子的高度;对于内联盒，这是   他们的行高＆＃39;。（见"Calculating heights and margins"和。{   height of inline boxes中的"Leading and half-leading"。）

的   内联级框根据其垂直对齐   ＆＃39;垂直对齐＆＃39;属性。如果他们对齐＆＃39;顶部＆＃39;或者＆＃39;底部＆＃39;，   它们必须对齐，以尽量减少线盒高度。如果是这样   盒子足够高，有多种解决方案和CSS 2.1   没有定义线框基线的位置。

行框高度是两者之间的距离   最上面的盒子顶部和最下面的盒子底部。空内联元素   生成空的内联框，但这些框仍然有边距，   填充，边框和线高，从而影响这些   计算就像有内容的元素一样。

关于盒子模型的MDN注释：

请注意，对于未替换的内联元素，占用的空间量 up（对线高度的贡献）由the确定 line-height属性，即使出现边框和填充视觉上围绕内容。

并由W3重申内联非替换元素：

＆＃39;身高＆＃39;财产不适用，但框的高度是由行高＆＃39;给出属性。

https://www.w3.org/TR/REC-CSS2/visudet.html#q15

行高为＆＃34;用于计算行框高度的高度。＆＃34;因此，虽然填充或边框可能会为内联元素提供高度外观，但只有line-height属性会影响父节点。正如您在下面的示例中所看到的，跨距上的线高会影响父div的高度。

＆＃13;

button,
div {
  background: blue;
}

span {
  background: orange;
  line-height: 10em;
}

hr {
  margin: 100px;
}

＆＃13;

<div>
  <span class="btn__content">
        I'm div inline content
    </span>
</div>

<hr>

<button class="btn" type="button">
    <span>
        I'm button inline content
    </span>
</button>

＆＃13;

另见Inline elements and line-height

为什么容器不能扩展以适应其内联元素

2 个答案: