考虑这个示例标记:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
margin:0;
font-size: 13pt;
line-height: 15pt;
}
h1
{
margin:0;
font-size: 21pt;
line-height: 30pt;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</body>
</html>
如果行高等于传统理解中的行间距,那么
和第一个
之间的距离将等于
之间的距离,因为这个距离是由行间距定义的。然而,事实并非如此。
之间的距离保持一致(
的行高-
的字体大小=15-13=2pt),但
和第一个
之间的距离不同:它等于(
的行高-
的字体大小)/ 2 +(h1>的行高-h1>的字体大小)/ 2 =(15-13)/ 2 +(30-21)/ 2 =5.5pt。
问题在于,在页面上保持垂直视觉节奏的传统方法是通过将元素的行间距设置为基本行间距的倍数。如上所示,这种方法在CSS中不适用。
我有3个问题:
1. 我对行高、行间距及其差异的理解是否正确? 2. 是否有一种方法可以使用CSS来保持垂直节奏(通过模拟CSS或其他方式的传统行间距)? 3. (附加问题)使行高与行间距如此不同的原因是什么?
更新:非常感谢您的意见!请注意,我提出了自己的解决方案,非常感谢任何对此的评论:https://dev59.com/Fmsy5IYBdhLWcg3wxAyO#8335230