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，關注公衆號；瞭解更多