设置网页文本行高的属性是 怎么设置网页文本行高

html-css046

设置网页文本行高的属性是 怎么设置网页文本行高,第1张

1、在CSS中,line-height被用来控制行与行之间垂直距离。

2、行间距与半行间距,还是取决于CSS中的line-height。默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值:p{line-height:140%}

你可以有5种方式来定义line-height。

3、line-height可以被定义为:body{line-height:normal}

4、line-height可以被定义为:body{line-height:inherit}

5、line-height可以使用一个百分比的值body{line-height:120%}

6、line-height可以被定义为一个长度值(px,em等) body{line-height:25px}

7、line-height也可以被定义为纯数字, body{line-height:1.2}

1.粗细 font-weight作用:设置文字是否加粗显示。属性名:font-weight(属于 font 属性的一个单一属性)

2.字体风格 font-style作用:设置文字是否斜体显示。属性名:font-style(属于 font 属性的一个单一属性)

3.行高 line-height作用:设置的是一行文字实际占有的高度,文字字号在行高中是垂直居中的。属性名:line-height,属于 font 属性的一个单一属性。

4.字体综合 font字体、字号、行高、加粗、斜体都是font综合属性的单一属性。font属性五个单一属性的值可以进行合写,属性值可以有2到多个,值之间用空格进行分隔。

5、水平对齐 text-align作用:设置文本水平方向的对齐。在盒子中,不论文本是单行还是多行,都会对应方向对齐。

6、文本修饰 text-decoration作用:设置文本整体是否有线条的修饰效果。

7、文本缩进 text-indent作用:设置段落首行是否进行缩进。

设置行高的属性: line-height

比如一段文本:

这里绿色框之间的距离,为行间距, 行间距 = 行高 - 字体大小

我们利用行高,还可以做单行文字在父元素中居中的效果,这里只需要讲行高的高度设置为跟父元素高度一样大小即可。但是这里需要注意的是,这里只对当行文本有效果,多行文本不行。

test.css

test.html

注意

设置行高时,有一个地方需要注意,当line-height属性与font属性合用时,要使line-height设置的高度生效,line-height的声明位置要在font之后。因为font有默认的行高,比如 {font: 10px/100px, "微软雅黑"} 。如果line-height在font之前就声明了,那么在font中会覆盖line-height的值。

test.css

修改后的test.css

当然,也可以直接这样: