Question

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的高度非为零。

查看演示

添加一个演示

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

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

Answer 1

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

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

3）如果你使用font-size 0和line height 100，我会得到一个零高度的框：

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

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

Answer 2

即使所有元素（包括arg3=3元素）上的line-height CSS样式为0，它在浏览器中的显示也会有所不同。我尝试在跨度中添加多行，并且外部span的高度相应地相乘：

因此，对于大字体，浏览器似乎不允许行高为0。 line-height高于0的字体大小在Chrome中显示为17px。

如果您设置跨度＆＃39;将属性显示为div，这些行不再堆叠，但行高保持不变：

如果您设置跨度＆＃39;将属性显示为inline-block，行高：0按预期应用：

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

对于未替换的内联元素，占用的空间量（对线的高度的贡献）由 line-height属性