line-height 和 height 区别

line-height是每一行文字的高(行高)，如果文章换行则整个盒子高度会增大（行数*行高）

height是一个固定值，就是这个盒子的高度。文章换行并不会改变盒子的高度。

注意点：

如果一个元素的height 和line-height相同，意味着这行文字在元素中垂直居中（仅限文字，且只能一行）。

当line-height = height 时，元素会垂直居中。

当line-height < height时，元素会偏上。

当line-height > height时，元素会偏下。

验证:height 时，换行不会改变盒子高度

<body><style>.box{width: 100px;background-color: #ccc;height: 50px;}</style><div class="box">ffffffffffsfafaafasdcvrgsvg<br>efgsbdtdrdvrsvdsrdsts<br>ggggggggggg</div>
</body>

line-height时，换行会改变盒子高度：

<body><style>.box{width: 100px;background-color: #ccc;line-height: 50px;}</style><div class="box">ffffffffffsfafaafasdcvrgsvg<br>efgsbdtdrdvrsvdsrdsts<br>ggggggggggg</div>
</body>

分析：增大后盒子高度变为了行数3*行高50 = 150；

line-height 和 height 区别相关推荐

关于height:100%和height:100vh的区别
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置height ...
height:100%和height:100vh的区别
(1)vh (视口高度)和 vw(视口宽度)介绍 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 效果: 当元素没有内容时候,设置height:10 ...
关于height:100vh和height:100%的区别
1.em 在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于"倍",比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小 ...
clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight o ...
html中高与行高的区别,CSS中line-height与height有什么区别
line-height--行高属性,设置文本模式上下距中伤隔. height--高度属性,设置装备摆设对象高度剖析图从上图我们就能够形象中的line-height与height判别: 1.违抗分歧 ...
height:100%与height:inherit的区别
简介大部分情况下两者的表现都是一致的,但是兼容性不同百分比 IE6+. inherit IE8+ 但是在小部分情况下inherit,会表现的更加强大百分比是直接继承父元素的百分比,如果父元素没有 ...
vty 虚拟终端连接 line vty 0 4 和line vty 5 15 区别
在思科交换机Catalyst 2950上show run下发现有两个line vty line vty 0 4 和line vty 5 15 分别有相应密码 .. 请问这两个有什么区别? VTY是Ci ...
回车（carriage return）和换行（line feed）的区别和来历
文章转自:http://blog.csdn.net/xiaoxian8023/article/details/8448160.版权归原作者. 关于"回车"(carriage ret ...
Qt Line Text Plaintext EDIT区别
QLineEdit是单行文本输入,一般用于用户名.密码等少量文本交互地方. QTextEdit用于多行文本,也可以显示HTML格式文本. QPlainTextEdit与QTextEdit很像,但它可以 ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...

line-height 和 height 区别

line-height 和 height 区别相关推荐

最新文章

热门文章