line-height属性指的是行的基线之间的距离（《css权威指南》）

默认空div高度是0，但是一旦写上几个文字，高度就有了，这个高度由何而来？

表面上看，是有font-size决定的，但是本质上，是由line-height全权决定的，与font-size大小无关。

对于非替换元素的纯内联元素，其可视高度完全由line-height属性决定

（注意这里面的完全，即padding，border属性对于可视高度无任何影响）

对于文本这样的纯内联元素，line-height是高度计算的基石：指定了用来计算行框盒子的基础高度。

比如说，line-height设为16px，第一行16，2行就是32，以此类推。

通常，line-height的高度作用的细节都是使用 行距和半行距来解释的

内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是行距，line-height之所以起作用，就是通过改变行距实现的。

联想一下文字排版，如果不改变字体字号，增加行距，也会占更多的篇幅。

css中的行距分散在当前文字的上方和下方，即使是第一行文字，其上方也是有行距的，只不过这个行距的高度仅仅是完整行距高度的一半，因此也称为半行距。

行距=行高-embox；转化成css语言就是

行距=（line-height）减去fontsize

em-box 其高度正好就是1em，em是一个相对font-size大小的css单位，1em等于当前一个font-size大小；

文字图形区域是embox的范围嘛？

不是的，比如说一些带尾巴的英文字符（q或者g）其小尾巴在em-box范围之外，对于汉字，很多字体图形实际上小于em-box的高度。

内容区域出马：

大多数情况下，内容区域和em-box不一样，

1.内容区域高度受font-family和font-size共同影响，

2.而em-box仅受font-size影响，通常是内容区域更高一些。

但是字体是宋体的时候，这两个东西是相同的

最后

以上就是漂亮火为你收集整理的css世界读书笔记->line-height（0）line-height属性指的是行的基线之间的距离（《css权威指南》）对于非替换元素的纯内联元素，其可视高度完全由line-height属性决定行距=行高-embox；转化成css语言就是行距=（line-height）减去fontsize内容区域出马：1.内容区域高度受font-family和font-size共同影响，2.而em-box仅受font-size影响，通常是内容区域更高一些。 的全部内容，希望文章能够帮你解决css世界读书笔记->line-height（0）line-height属性指的是行的基线之间的距离（《css权威指南》）对于非替换元素的纯内联元素，其可视高度完全由line-height属性决定行距=行高-embox；转化成css语言就是行距=（line-height）减去fontsize内容区域出马：1.内容区域高度受font-family和font-size共同影响，2.而em-box仅受font-size影响，通常是内容区域更高一些。 所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。