height:auto 如何与 line-height:0 和不同的字体大小交互答案

【问题标题】：How does height:auto interact with line-height:0 and different font-sizeheight:auto 如何与 line-height:0 和不同的字体大小交互
【发布时间】：2016-05-23 09:04:17
【问题描述】：

HTML：

<div>
  <span>Some text here...</span>
</div>

CSS：

div {
    line-height: 0;
}

div 在这种情况下得到height: 0。

但是，当我指定更大的font-size 时

span {
    font-size: 100px;
}

虽然有line-height: 0，但div 的高度不为零。

~~您可以在https://jsfiddle.net/cjvpLfv2/查看演示~~

编辑：在https://jsfiddle.net/cjvpLfv2/12/添加另一个演示

如果我将font-size: 100px 应用于span 和div，则div 再次获得height: 0px

我的问题是height: auto 在这种简单情况下如何与line-height 和font-size 交互（只有一个内联元素的块级容器）

【问题讨论】：

这与 height: auto 无关，与 line-height: 0 有关。
@BoltClock,line-height: 0表示最小行高为0。我认为这与height: auto的计算方式有关。
而 height: auto 表示内容的高度，所以使用的行高显然是非零的，这就是赋予 BCB 高度的原因。高度真的没有什么比它本身更重要了：自动。
@BoltClock，BCB 是什么意思？我试过调整 line-height ，似乎 line-height 分配了 0px 并且有效。可能还有其他一些因素决定了 div 的高度。我在编辑中添加了另一个有趣的演示。请检查一下。

标签： css font-size

【解决方案1】：

1) 字体大小决定了行高。 如果没有定义，the normal factor for line-height seems to be 1.2。

2) 行高指示自动框高度，与字体大小无关。（在许多情况下，人们没有定义行高，因此本质上是“字体大小加上一个软糖因素”决定了盒子的高度，这看起来很自然）。 更新：当然，这就是类型内部的要求。对盒子的需求排在首位。（而且，无论是否内联，空格都是一个盒子......）。坦率地说，我仍然错过了一块拼图。

3) 如果您使用字体大小 0 和行高 100，我会得到一个零高度框：

<div style='font-size:100px; line-height: 0'>
  <span>Some</span>
</div>

see codepen here (last box has your use case)。方框 4 到 6 证明了第 (2) 点。

您获得的行高与将部分样式赋予内部<span> 相关，而不是<div>。 See here.

【讨论】：

您的观点 (3) 有错字。你能提供更多关于什么是决定盒子高度的“软糖因素”的细节吗？
通过（看似）软糖因素，我的意思是字体大小“加上 20%”（（1）中提到的 1.2）。这个答案可以接受吗？

【解决方案2】：

尽管 line-height CSS 样式在所有元素上都是 0，包括 span 元素，但它在浏览器中的显示方式似乎有所不同。我尝试在跨度中添加多条线，并且外部 div 的高度相应地成倍增加：

https://jsfiddle.net/cjvpLfv2/4/

所以浏览器似乎不允许大字体的行高为 0。在 Chrome 中 line-height 高于 0 的 font-size 似乎是 17px。

如果将 spans 的显示属性设置为 inline-block，则行不再堆叠，但行高保持不变：

https://jsfiddle.net/cjvpLfv2/6/

如果将 span 的显示属性设置为 block，则按预期应用 line-height: 0：

https://jsfiddle.net/cjvpLfv2/7/

我没有找到任何关于这种行为的文档，box-model page on mdn 只是声称：

对于不可替换的内联元素，占用的空间量（对线的高度的贡献）由行高属性

【讨论】：

【解决方案3】：

这个答案有点晚了，但你的问题引起了我的兴趣，所以我决定试一试。一段时间后，我发现答案其实很简单：

div的高度等于行高。

你的 line-height 变成非 0 的原因是你有不同的 font-size。这个大小差异在 div 和 span 之间并不重要，您可以在 span 元素中有 2 种不同的字体大小。关键是，一旦你有 2 种不同的字体大小，行高就会变成非 0。

我不知道确切的公式，但它似乎是基于尺寸的差异，更具体地说是两种尺寸中间之间的距离差异。您会看到 div 的底部和顶部边框将分别与最小和最大 font-size 的中间对齐。

您可以通过在第二个 html 代码块的开始 div 和 span 标记之间添加 AaGg 来轻松演示这一点，如下所示：

<div>AaGg
<span class=big-font-size>AaGg</span>AaGg
</div>

我不知道为什么或计算的确切细节，但是这个新计算的 line-height 基本上会覆盖你指定的 line-height: 0;

【讨论】：