css行高的用法总结

css没有提供一个直接设置行间距的方式，所以只能通过设置行高来间接的设置行间距，行高越大行间距就越大，用 line-height 来设置行高。

.p1 {
    /* 设置行高 */
    line-height: 40px;
}

行高类似于上学时使用的单线本，单线本是一行一行的线，线与线之间的距离就是行高，网页中的文字实际上是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。

行间距 = 行高 - 字体大小

line-height 可以设置的值的类型：

直接接收一个大小，如：line-height: 20px;
可以指定一个百分数，如：line-height: 100%;
可以直接指定一个数字，不带单位，如：line-height: 1.5;

/* 行间距 = 40px(行高) - 20px(字体大小) 为 20px */
.p1 {
    /* 字体大小 */
    font-size: 20px;
    /* 行高为 40px */
    line-height: 40px;
}

/* 行间距 = (200% * 20px(字体大小))(行高) - 20px(字体大小) 为 20px */
.p1 {
    /* 字体大小 */
    font-size: 20px;
    /* 行高 = 200% * 20px(字体大小) 为 40px */
    line-height: 200%;
}

/* 行间距 = (2 * 20px(字体大小))(行高) - 20px(字体大小) 为 20px */
.p1 {
    /* 字体大小 */
    font-size: 20px;
    /* 行高 = 2 * 20px(字体大小) 为 40px */
    line-height: 2;
}

对于单行文本，可以将行高设置为和父元素的高度一致，这样可以将单行文本在父元素中垂直居中，注意，一定是单行文本

.box1 {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    /* line-height 等于 height，单行文本就会在父元素内垂直居中 */
    line-height: 200px;
}
<div class="box1">
    <a href="#">蜀道之难，难于上青天！</a>
</div>

在 font 属性中也可以指定行高，在字体大小的后面添加 "/行高"，该值是可选的，如果不指定则会使用默认值。

/* 格式 */
.p1 {
    /* 在字体后面加 “/50px”，表示行高 */
    font: bold italic normal 30px/50px 微软雅黑, 宋体, Serif;
}

/* 错误的写法 */
.p1 {
    /* 在此设置行高，不会起作用，相反font的"/50px"会起作用 */
    line-height: 100px;
    /* 在字体后面加 “/50px”，表示行高 */
    font: bold italic normal 30px/50px 微软雅黑, 宋体, Serif;
}

/* 错误的写法 */
.p1 {
    /* 在此设置行高也不会起作用 */
    line-height: 100px;
    /* 在字体后面未设置行高，会使用默认值而不是用上面设置的行高 */
    font: bold italic normal 30px 微软雅黑, 宋体, Serif;
}

/* 正确的写法 */
.p1 {
    /* 在字体后面未设置行高 */
    font: bold italic normal 30px 微软雅黑, 宋体, Serif;
    /* 行高 */
    line-height: 100px;
}

/* 正确的写法 */
.p1 {
    /* 在字体后面设置行高 "/100px" */
    font: bold italic normal 30px/100px 微软雅黑, 宋体, Serif;
}

css行高的用法总结

猜你喜欢