当前位置： 移动技术网 > IT编程>网页制作>CSS > css———理解height与line_height

css———理解height与line_height

2019年10月22日  | 移动技术网IT编程  | 我要评论

定义

height指的是块级别元素的高度；

line-height指的是元素内容的高度。

 

height和line-height的联系

css中起高度作用的应该就是height以及line-height。height是用来设置元素的高度，比如img的高度、div的高度等。

如果不设置div的高度时，是div的font-size决定了div的高度还是line-weight的值？

测试一

css:
    .test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;} 
html:
    <div class="test1">测试</div>

结果：

 

 

 

测试二

 

css:
    .test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
      <div class="test2">测试</div>

结果：

 

 

结论：在没有设置div的height属性时，div的高度根据line-height的大小而变化，且文字垂直居中。

 

div的height与line-height的大小关系不同时，会有什么显示结果呢？

 

（1）height = line-height时
在这里插入图片描述
（2）height>line-height时
在这里插入图片描述
（3）height<line-height时
在这里插入图片描述

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网