元素的高度是否由line-height撑起的？

Question

以前在博客中看到元素的高度是由line-height撑起的，所以我写元素时我都不定义height直接写line-height，但是在360安全浏览器却是这种效果，手机上的uc也是这种效果？难道是说法是错误的？

Answer 1

一个 block元素在没有设置高度的时候，计算其高度的方式确实是根据其中有多大的元素计算的。line-height只作用与行内元素,对block来说这个属性没有意义（当然可以继承）。

父元素中的子元素按照一定的方式计算一个大小。那么如果父元素('block')设置了height，父元素的高度就是设置的这个高度(如果容不下子元素就根据overflow确定行为)，如果没有设置height，那么就是能够容纳所有子元素的最小的大小（就是你说的被撑开）。

你的截图中a是一个block设置了一个 height并且被覆盖了，说明其他地方设置了优先级更高的height，可能是加了important。所以a的高度就是设置的那个高度，而不是被其中的内容“撑开”的高度。

Answer 2

你看下下面有没有height覆盖了，height你是手动隐藏的？

Answer 3

不太明白你说的意思，但是元素高度你去用line-height会引起很多不必要的麻烦吧，当你有两行字的时候不是间距会很大，既然它有height这个属性可以让你设置你为什么还要去用line-height呢，它有没有比较好用，相反会有副作用，建议还是用height比价好。有些属性本来在浏览器之间就有差别，各种诡异现象和不兼容，所以还是用共有的支持属性好，省心！

Answer 4

height和line-height各有各的用法啊，在网站是自适用的时候，还是使用height比较保险，line-height只是控制元素的大小时候使用的。不推荐用于撑开，因为如果客户需求改变的时候，你在修改的时候你的页面样式不都乱了吗！！

Answer 5

line-height 的详细介绍
http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

Answer 6

今天也在看这个问题，觉得挺奇妙，height和line-height，以及block，inline-block之间的关系，如果没有文本项，是不是line-height其实是无效的?