Posted on | by liu
在 CSS 中,大家可以使用 line-height 属性来设置行间距。该属性指定了文本行的高度,即行间距加上字体高度的总和。
默认情况下,line-height 属性的值等于字体大小,即 1,也可以使用像素、百分比或具体的值来设置。例如,以下代码将行间距设置为 1.5 倍的字体大小:
p {
font-size: 16px;
line-height: 1.5;
}
大家也可以使用 em 单位来设置行间距。1em 等于当前字体大小,因此使用 em 单位可以确保在更改字体大小时行间距也相应调整。例如,以下代码将行间距设置为 1.2 倍的字体大小:
p {
font-size: 18px;
line-height: 1.2em;
}
大家也可以使用像素或其它具体的值来设置行间距。例如,以下代码将行间距设置为 28 像素:
p {
font-size: 16px;
line-height: 28px;
}
除了在样式中显式设置行间距外,大家还可以使用 CSS 的继承机制来实现行间距的继承。例如,如果大家将行间距设置在 body 元素上,那么所有子元素都会继承这个行间距。以下代码将行间距设置为 1.5 倍的字体大小,并应用于所有元素:
body {
font-size: 16px;
line-height: 1.5;
}
p, h1, h2, h3, h4, h5, h6 {
/* 继承 body 的行间距 */
}
总之,使用 line-height 属性可以很方便地设置 CSS 中的行间距,而且还可以根据需要灵活地设置字体大小、像素或其它具体的值来调整行间距。