了解 CSS 不同字体大小的换行

Question

考虑这个例子：

div.big {
  font-size: 2em;
  font-weight: bold;
}

div.big .small {
  font-size: 40%;
}

div.small {
  font-size: 0.8em;
  font-weight: bold;
}

div.small .big {
  font-size: 2rem;
}

<div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<p>Something else</p>

<div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Something else</p>

在第一种情况下（小字体内联元素在较大字体大小的块元素内），环绕文本周围的间距与第二种情况（大字体内联元素内）不同较小的字体大小的块元素）。

在多行换行时更加明显：

导致这种差异的 property/behavior 是什么，有没有办法在不更改标记的情况下使第一个示例看起来像第二个示例？

Answer 1

您看到的原因是 line-height，默认情况下它是相对于 font-size，即 parent/block 元素的 font-size。它通常以百分比或像 1.6 这样的乘数定义 - 如果您在样式表中没有看到任何此类参数，仍然有相应的浏览器默认设置，通常在 1.4 到 1.6 之间。

如果您将 line-height 设置为固定像素值（在现实生活中您几乎不应该这样做），这两个示例看起来是一样的，如下面的代码变体所示：

div.big {
  font-size: 2em;
  font-weight: bold;
  line-height: 16px;
}

div.big .small {
  font-size: 40%;
}

div.small {
  font-size: 0.8em;
  font-weight: bold;
  line-height: 16px;

}

div.small .big {
  font-size: 2rem;
}

<div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<p>Something else</p>

<div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Something else</p>

Answer 2

欢迎来到 SO。

只需将 display: contents; 添加到

div.big {
  font-size: 2em;
  font-weight: bold;
  display: contents;
}

演示：

div.big {
  font-size: 2em;
  font-weight: bold;
  display: contents;
}

div.big .small {
  font-size: 40%;
}

div.small {
  font-size: 0.8em;
  font-weight: bold;
}

div.small .big {
  font-size: 2rem;
}

<div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<p>Something else</p>

<div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Something else</p>

了解 CSS 不同字体大小的换行

Understanding CSS line wrapping with different font-sizes

html

css

fonts

font-size