padding与line-height的区别

有朋友问了一个关于CSS中的基础概念问题，那就是padding与line-height的区别。对于不熟悉盒模型知识、布局以及相关属性的朋友来说，这两者确实容易混淆。

我们要明确的是，padding和line-height在CSS中扮演着不同的角色。

想象一下你在设计一栋建筑，这栋建筑有墙和内部空间。这里的padding就像是墙与建筑内部空间之间的间隔，也就是容器的内边距。你可以通过调整padding来改变这个间隔的大小，从而调整元素在容器中的位置。你可以为元素设置四个方向的padding值，比如上、右、下、左。如果只提供一个值，那么这个值会应用于所有四个方向；如果提供两个值，那么第一个值会用于上下方向，第二个值用于左右方向；如果提供三个值，则第一个值用于上方，第二个用于左右方，第三个用于下方。需要注意的是，内联对象在使用padding属性之前，必须设定其height或width属性，或者将position属性设为absolute。padding的值不能是负的。

然后我们来谈谈line-height。这个概念更像是文字行之间的“高度”。它定义的是一行文字与其下一行文字之间的距离。想象你在阅读一篇文章时，文字与文字之间的空间就是line-height所定义的。对于文本内容来说，line-height决定了文本行之间的距离或间距。你可以通过调整line-height来改变文本的行距。当一行内包含多个对象时，应用的行高是其中的最大值。另外需要注意的是，line-height的值也不能为负。如果对一个元素设置了line-height属性为某个百分比值，那么该元素的行高将会基于其字体大小进行计算并调整。例如文本“狼蚁SEO--中国网页设计,网页制作第一站”，如果我们给段落p或div设置padding-top为40px以及line-height为200%，将会得到一个特定的布局效果。这样一来，文字之间的距离以及文字和容器边缘的距离都得到了调整，页面布局会更加美观和舒适。这就是我们所说的CSS盒模型的魅力所在。