DIV 中的高度是由什么决定的

DIV 中的高度是由什么决定的

演示效果
HTML代码片段
CSS代码片段

DIV 中的高度是由什么决定的

默认div的高度是0，但是我们在div中放入文字，div的高度就有了。很多人会认为是文字大小font-size决定的。其实要知道这个问题；我们可以通过简单实例就知道了。div的高度实际是通过line-height决定的。

演示效果

图片: DIV 中的高度是由什么决定的

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

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，关注公众号；了解更多

DIV 中的高度是由什么决定的