css教程：美化网页段落的排版

这里值得注意的是，当我们使用margin的时候两个段落之间的margin会有重叠，那么看上图中右侧的图我们可以发现在两段之间的margin是被重叠了原本应该是两个高度相加的结果还是一个高度，但是上图中间的示意padding却没有重叠他们的高度是相加的，这点大家要注意到，这不是什么BUG，而是一种特性。那么我们就写一句CSS来设定我们的段落：

1. p {margin:1em 0;}

 说了段距自然就会说到行距，有看过《网页设计技巧系列之一 浅谈文本排版》的朋友就会明白行距的重要性，那么你是否有给自己的页面设置行距呢，是如何设置的？ 设置行距有一个专门的属性：line-height，这个应该称之为行高。因为我们要设定的是一行的高度，而不是行与行之间的距离。这也就是为什么我们总发现Photoshop里设置行距的数据与做网页设置的数值不一样的原因了。但是行距依然是可以通过我们设定的行高最终产生，所以方法不同，但是目标是一致的。一般我们的行高一定是要超过字体高度的，否则行与行之间就会重叠，当然我们不排除使用这种式做一些特别的效果，但是至少在阅读文本上我们需要行行清楚。行距不宜太大，太大了阅读效率不高，如果太小了又容易读错行。所以一般行高不应超过两个字的高度。振之最常用的是1.6em~1.8em之间，如果宽度很大，我们就需要加大行距不然我们很容易读错行，如果宽度小的时候行距过大则失去了阅读的效率。那么我们把刚才的段落的CSS做一下增加，标注一下我们的行距：

1. p {margin:1em 0; line-height:1.6em; }

 这样对于一

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!