还原设计稿之行高 line-height

by zhangxinxu from http://www.zhangxinxu.com 本文地址： http://www.zhangxinxu.com/wordpress/?p=384 补充于2017年12月31日：写本文时本人尚年轻，很多措辞和观点并不严谨，内容仅供参考。更体系更深入的理解在我的 《CSS世界》 这边书中有详细阐述。 前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解CSS行高"（原地址失效已久），是个不错的文章，学到了不少东西，建议您看看。 这里，我也要讲讲我对 line-height的一些理解，所讲解的东西绝大多数与上面提到的" 深入理解css 行高"是不重复的，可以说是补充或是另外一个角度的思考。另外，将结合实际，展示 line-height的一些特性和一些常见应用，帮助您对CSS行高 line-height 的理解。所讲述的并不一定都是正确的，欢迎指正欢迎交流。 "行高"顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。 但是由于中文跟英文长得不一样，所以基线的说法就像老太太穿线--对不上眼。您理解为底线之差也不为不可。只是定义一回事，表现则另一回事。 先说一个大家都熟知的现象，有一个空的 div， ，如果没有设置至少大于 1像素高度 height值时，该 div的高度就是个 0。如果该 div里面打入了一个空格或是文字，则此 div就会有一个高度。那么您思考过没有，为什么 div 里面有文字后就会有高度呢？ CSS代码： .test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;} .test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;} HTML代码： 测试 测试 结果如下图(windows IE6浏览器下)： 结果是如此的显而易见，test1 div有文字大小，但行高为