行间距

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

在CSS中并没有提供一个直接设置行间距的方式,我们只能通过设置行高来间接地设置行间距,行高越大则行间距越大。

  • 使用line-height来设置行高
    行高类似于我们日常生活中使用的练习本,练习本是由若干条水平的直线绘制而成,那么线与线之间的距离就是行高。
    网页中的文字实际上也是写在一条条看不见的水平线之间的,而文字默认会在行高中垂直居中显示。

我们有以下计算公式:行间距 = 行高 - 字体大小

line-height可以接收的值:
        1.指定一个大小单位(如20px)
        2.指定一个百分数(如150%),则会相对于字体去计算行高
        3.指定一个数值(如1.5),则会设置行高为字体大小的相应倍数

  • font中指定行高
    字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
    例:font: 16px/25px "微软雅黑";

小技巧:对于单行文本,可以将行高设置为父元素的高度,这样可以使单行文本在父元素中垂直居中。

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/29.html