探索「font: 14px/20px」在 css 中的奥秘
在 css 中经常能看到类似「font: 14px/20px」这样的属性，它告诉浏览器如何设置字体，但其中的「14px/20px」却让人困惑。下面我们将逐一揭开它的含义：
「font-size: 14px」和「line-height: 20px」
「14px/20px」实际上是由两个相邻值组成的，第一个值「14px」表示字体大小，而第二个值「20px」表示行高。行高定义了文本基线之间的垂直距离，而不包括字体的实际高度。
立即学习“前端免费学习笔记（深入）”；
换句话说，「font: 14px/20px」等同于：
font-size: 14px; line-height: 20px;
为什么需要行高？
行高不仅影响文本的可读性，还有其他作用：
- 防止文本重叠，尤其是在使用较大的字体时。
- 让文本在不同浏览器和设备上显示得更加一致。
- 创建更宽敞的空白空间，使文本更容易辨认。
如何生效？
浏览器将根据您为元素设置的字体大小自动调整行高，但这可能会导致较大的字体重叠。通过指定一个较大的行高值，您可以确保文本有足够的空间显示，而不会出现重叠。
示例
在您的示例中，您可以通过将中间 div 的行高设置为「40px」来解决文本重叠问题：
zuojiankuohaophpcndiv style="font-size: 40px; line-height: 40px;"youjiankuohaophpcn标题1zuojiankuohaophpcn/divyoujiankuohaophpcn
这样，文本就不会再重叠，并且中间 div 的高度将根据字体大小增加。
