应用视觉设计：「10」通过 line-height 属性设置行高

路条编程 2020-08-26

731

欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。

今天我们要介绍的内容是通过 line-height 属性设置行高。line-height 是指相邻两行文本基线之间的垂直距离。那什么是基线呢？对任何一个行内非替换元素，其内容区都会存在四条假想的线，分别是底线（bottom）、基线（baseline）、中线（middle）、顶线（top），它们就类似于书写英文时的四线三格。具体示例如下图所示：

上图为网上图片，画得比较清晰，没有自己单独制作相应图片。图片来源：https://www.cnblogs.com/mengfangui/p/7373048.html

如果在一个块级元素上声明 line-height 值，这个值将会应用到块中的所有内容。所以，常常为一个段落元素声明 line-height 值，来指定段落每行文本的行高。

由于 line-height 属性具有继承性，因此，可以只在父元素中定义 line-height 规则，而不必在所有子元素中显式地声明 line-height 属性值。

line-height 属性可以使用以下不同的值，具体值如下所示：

<style type="text/css">
body {
    line-height: normal; /* default */
    line-height: 2;
    line-height: 1em;
    line-height: 1rem;
    line-height: 200%;
    line-height: 20px;
}
</style>

如上代码所示， line-height 属性可以设置 6 种属性值。默认值为 normal ，通常，这意味着将其设置页面默认字体大小的 1.2 倍。没有任何单位的数字值意味着什么呢？它实际上表示该元素字体的相应倍数。font-size 取值并将其乘以相应倍数。让我们通过以下示例计算下相应的行高。

<style type="text/css">
body {
    font-size: 16px;
    line-height: 1.5;
}
</style>

以上代码我们只需进行以下计算：16 * 1.5 = 24px 。我们计算得到文本的行高为 24px 。因此，它将在文本上下方各添加 4 个像素。

接下来是 em 和 rem 。rem 是相对于页面根元素的 font-size 值，em 相对于当前元素的 font-size 值。em 及 rem 示例如下所示：

<style type="text/css">
html {
    font-size: 12px;
}


.remLHeight {
    font-size: 16px;
    line-height: 1.5rem; /* line-height 值为 12 * 1.5 = 18px */
}


.emLHeight {
    font-size: 16px;
    line-height: 1.5em; /* line-height 值为 16 * 1.5 = 24px */
}
</style>

百分比使用 % 来表示。100％表示乘以 1 ，示例如下所示：

<style type="text/css">
body {
    font-size: 12px;
}


.pctLheight {
    font-size: 16px;
    line-height: 150%; /* line-height 值为 16 * 1.5 = 24px */
}
</style>

像素值 px 对我们来说是最简单，但也是最容易产生歧义的。例如，元素的 font-size 值为 16px，而你将 line-height 设置为 12px ，则字体大小将比包装它的容器大。通常，应避免使用像素值的 line-height 值。

调整页面样式代码，将宽度媒体查询最小值为 660 的样式下 .text p 段落元素的行高分别设置为 1.2em 和 1.9 em ，截取两张相应的效果图片进行比较，样式代码调整如下所示：

<style type="text/css">
 @media (min-width: 660px) {
        .wrapper {
          grid-template-columns: 1fr 1fr 1fr 1fr;
        }


        .text {
          grid-column: 2 / 4;
          grid-row: 1 / 3;
        }


        .text p {
          line-height: 1.9em;
        }


        .wide {
          grid-column: auto / span 2;
        }
  }
</style>

效果图比较如下所示：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

应用视觉设计：「10」通过 line-height 属性设置行高

评论