CSS行高line-height默认值normal以及line-height与盒子的关系

来源：互联网发布：fifa online3网络延迟编辑：程序博客网时间：2024/05/22 17:07

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style type="text/css">body {margin: 0;padding: 0;}.box1 {font-size: 20px;line-height: 0;border: 1px solid #ccc;background: #eee;margin-top: 20px;}.box2 {font-size: 0;line-height: 20px;border: 1px solid #ccc;background: #eee;margin-top: 50px;}</style><body><div class="box1">盒子1</div><div class="box2">盒子2</div></body></html>

结果：box1盒子有文字大小，line-height设置为0；box2盒子文字大小设置为0，line-height为20px。结果显示box2盒子的高度为20px（当然盒子的高度还要加上border，box2盒子高度22px），说明撑开盒子高度的是line-height不是文字内容

注：line-height的默认值为normal，大家常理解normal相当于line-height的值是1或者1.2，当line-height值为数字时，表示是font-size的倍数。经Chrome测试，默认line-height值是font-size的1.3倍。line-height复杂，暂且理解这么多

阅读全文

1 0