一、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
https://blog.51cto.com/u_15302032/5069527