求助CSS的line-height各浏览器的上下留白怎么一回事啊
时间：2010-11-18
来源：互联网
各浏览器上下补白到底怎么排的啊。。。
都没点规律，我晕死，求规律
我们设置了font-size如12px, line-height=22px，那么上面文字行上边会有5px的空白，下边会有5px的空白，其上面和下面不同的数据不同的浏览器会有不同，下面是我测试的一个结论，但是那么这个普遍的规律到底怎么算 上留白和下留白了各浏览器
都没点规律，我晕死，求规律
我们设置了font-size如12px, line-height=22px，那么上面文字行上边会有5px的空白，下边会有5px的空白，其上面和下面不同的数据不同的浏览器会有不同，下面是我测试的一个结论，但是那么这个普遍的规律到底怎么算 上留白和下留白了各浏览器
复制内容到剪贴板
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0}
body{font-size:12px}
div {width:960px; border:1px solid #F00; margin:0 auto}
.d22{line-height:22px}
.d21{line-height:21px}
.d20{line-height:20px}
.d19{line-height:19px}
.d18{line-height:18px}
.d17{line-height:17px}
.d16{line-height:16px}
.d15{line-height:15px}
.d14{line-height:14px}
.d13{line-height:13px}
.d12{line-height:12px}
</style>
</head>
<body>
<h1>此间距量取排除英文如英文P比字下部分多1px</h1>
<div class="d22"><p>这里是一个line-height为22px的示范，FF下上下留白为5</p></div>
<div class="d21"><p>这里是一个line-height为21px的示范，FF上留白4下留白5 IE6下上5下4</p></div>
<div class="d20"><p>这里是一个line-height为20px的示范，FF上下留白4</p></div>
<div class="d19"><p>这里是一个line-height为19px的示范，FF上留白3下留白4 IE6下上4下3</p></div>
<div class="d18"><p>这里是一个line-height为18px的示范，FF上下留白3</p></div>
<div class="d17"><p>这里是一个line-height为17px的示范，FF上留白2下留白3 IE6上3下2</p></div>
<div class="d16"><p>这里是一个line-height为16px的示范，FF上留白2下留白2</p></div>
<div class="d15"><p>这里是一个line-height为15px的示范，FF上留白1下留白2 IE6上1下2</p></div>
<div class="d14"><p>这里是一个line-height为14px的 示 FF上留白1下留白1</p></div>
<div class="d13"><p>这里是一个line-height为13px的示范，FF上留白0下留白1 IE6上0下1</p></div>
<div class="d12"><p>这里是一个line-height为12px的示范，</p></div>
</body>
</html>
上面仅测试了IE6和FF，如果FF和IE6的上下留白相同就没标注IE6数据位多少的。。 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0}
body{font-size:12px}
div {width:960px; border:1px solid #F00; margin:0 auto}
.d22{line-height:22px}
.d21{line-height:21px}
.d20{line-height:20px}
.d19{line-height:19px}
.d18{line-height:18px}
.d17{line-height:17px}
.d16{line-height:16px}
.d15{line-height:15px}
.d14{line-height:14px}
.d13{line-height:13px}
.d12{line-height:12px}
</style>
</head>
<body>
<h1>此间距量取排除英文如英文P比字下部分多1px</h1>
<div class="d22"><p>这里是一个line-height为22px的示范，FF下上下留白为5</p></div>
<div class="d21"><p>这里是一个line-height为21px的示范，FF上留白4下留白5 IE6下上5下4</p></div>
<div class="d20"><p>这里是一个line-height为20px的示范，FF上下留白4</p></div>
<div class="d19"><p>这里是一个line-height为19px的示范，FF上留白3下留白4 IE6下上4下3</p></div>
<div class="d18"><p>这里是一个line-height为18px的示范，FF上下留白3</p></div>
<div class="d17"><p>这里是一个line-height为17px的示范，FF上留白2下留白3 IE6上3下2</p></div>
<div class="d16"><p>这里是一个line-height为16px的示范，FF上留白2下留白2</p></div>
<div class="d15"><p>这里是一个line-height为15px的示范，FF上留白1下留白2 IE6上1下2</p></div>
<div class="d14"><p>这里是一个line-height为14px的 示 FF上留白1下留白1</p></div>
<div class="d13"><p>这里是一个line-height为13px的示范，FF上留白0下留白1 IE6上0下1</p></div>
<div class="d12"><p>这里是一个line-height为12px的示范，</p></div>
</body>
</html>
作者: gongzixiaobai 发布时间: 2010-11-18
这种问题，有必要进行深入研究吗。
line-height一般就用来设置单行的垂直居中，以及多行文字的一间距，
至于说，上留白和下留白具体有多少个像素，个人认为，没必要发时间去研究哈。
line-height一般就用来设置单行的垂直居中，以及多行文字的一间距，
至于说，上留白和下留白具体有多少个像素，个人认为，没必要发时间去研究哈。
作者: iJieZhang 发布时间: 2010-11-18
深入研究才有利于更好的领悟精粹
作者: gongzixiaobai 发布时间: 2010-11-18
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
