DIV 中的高度是由什么决定的
DIV 中的高度是由什么决定的
默认div的高度是0,但是我们在div中放入文字,div的高度就有了。很多人会认为是文字大小font-size决定的。其实要知道这个问题;我们可以通过简单实例就知道了。div的高度实际是通过line-height决定的。
演示效果
图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
HTML代码片段
<div class="container">
<!-- div 默认高度此时在页面不显示任何东西 -->
<div class="height0"></div>
<div class="height1">DIV行高决定测试1</div>
<div class="height2">DIV行高决定测试2</div>
</div>
CSS代码片段
<style type="text/css">
ul{
margin:0px;
padding:0px;
}
.container{margin:30px 0px;padding:100px}
.container
.container .height0,
.container .height1,
.container .height2 {
margin:30px 0px;
border:1px solid #FF5722;
background: #eee;
}
.container .height0{
/*默认div高度*/
}
.container .height1 {
font-size: 16px;
line-height: 0px;
}
.container .height2 {
font-size: 0px;
line-height:35px;
}
</style>
在div三段代码中;第一个默认高度为0,所以不可见。第二个行高为0,显示为一条2像素的线。第三个行高为35;虽然文字看不见,但是高度是依然存在;35px。
项目 | Value |
---|---|
默认 | 0 |
line-height | 0 |
line-height | 35 |
综上可以得出结论;div的高度是由line-height决定的。
测试源代码下载加Q群:149663025,关注公众号;了解更多