一、line-height:1的存在意义是什么（v1）
1. 加不加这段代码的区别是什么？
示例代码
<!DOCTYPE html>
<html lang="en">
<style>
p{line-height:1;} /* 随时注释的line-height:1 */
p{margin:0;background-color:#f5f5f5;border-bottom:solid 1px #ccc}
p:nth-child(1){font-size:12px;}
p:nth-child(2){font-size:14px;}
p:nth-child(3){font-size:16px;}
p:nth-child(4){font-size:18px;}
p:nth-child(5){font-size:20px;}
</style>
<body>
<p>12</p>
<p>14</p>
<p>16</p>
<p>18</p>
<p>20</p>
</body>
</html>
不加的情况下如下:
加上的情况：
明显的，我们可以看出它们的高度产生了变化。
也可以说文字上下的空白区域减少了，更贴合字体了。
2. 这样做的主要目的是什么？
这样做的主要目的是为了高保真还原设计图，在特意提及并有需求的情况下，部分的UI设计图要求精准控制展示效果，字体的高度是被严格控制的。
字体行高需要紧贴字体的情况下，可以使用line-height:1，或者line-height:100%。它们两个的效果是一样的。
二、参考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
