理解不同字体大小的 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>

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

在多行换行时，它变得更加明显：

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

Answer 1

您看到的原因是line-height ，默认情况下它与font-size ，即与父/块元素的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>