在HTML中,line-height
是一个CSS属性,用于设置行高,即文本行之间的垂直距离。以下是关于line-height
的详细介绍:
定义
line-height
属性设置行间的距离(行高),它影响行框的布局,在应用到一个块级元素时,定义了该元素中基线之间的最小距离。
参数设置
normal
:默认值,设置合理的行间距。number
:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。length
:设置固定的行间距,如10px
、2em
等。%
:基于当前字体尺寸的百分比行间距。inherit
:规定应该从父元素继承line-height
属性的值。
示例
- 使用数值设置行间距:
line-height: 2;
,表示行高是字体大小的两倍。 - 使用像素值设置行间距:
line-height: 30px;
,表示行高固定为30像素。 - 使用百分比设置行间距:
line-height: 200%;
,表示行高是字体大小的200%。
注意
line-height
属性不允许使用负值。- 在各浏览器下对于
line-height
的解决有细微区别,上下会有1px的差别,建议行高设计时用偶数。 - 如果样式声明列表中有
line-height
与font
,则line-height
无效,必须与font
一起使用。
实例
- 在多行文本中,一般不会直接设置像素值,而是使用相对单位,如
em
或rem
,以避免字体大小变化时出现问题。 - 利用
line-height
与元素高度相等时文字垂直居中的特性,可以实现单行文本的垂直居中。
通过上述介绍,可以更好地理解和使用line-height
属性来控制HTML中的文本行间距和实现一些布局效果。