內聯塊元素高度問題

Question

我有一個簡單的例子，其中外部DIV包含一個內部DIV
display: inline-block; 。
因為我已經設置了內部div的高度，所以我希望外部div與內部div具有相同的高度。 相反，外部div略高，正如你可以從小提琴中看到的那樣。 問題：為什么會發生這種情況？如何在不明確設置高度的情況下“填充”外部div？
我的目標是根據內部的高度使外部div擴展和縮小。

 .outer { background-color: red; } .inner { display: inline-block; width: 480px; height: 140px; background-color: green; } 

 <div class="outer"> <div class="inner"></div> </div> 

Answer 1

你的.inner div有display: inline-block 。 這意味着它需要圍繞它的內聯格式化上下文。 內聯布局產生支柱 ，為下降器提供空間。 如果你在.inner元素旁邊添加一個字符，你可以看到它是如何適合的： http ： //jsfiddle.net/bs14zzeb/6/

默認的vertical-align是使inline-block框的下邊緣與周圍文本的基線對齊。 即使沒有周圍文本 ，布局引擎仍然需要為整行文本騰出空間。

這就是為什么這些答案暗示你使用vertical-align屬性。 將其設置為vertical-align: top ，如一個答案所示，告訴布局引擎將inline-block框的上邊緣與線框的上邊緣對齊。 在這里，由於線高小於140px高，它擺脫了底部的額外空間。 但如果一條線的高度比那條高，你下面還會有額外的空間： http ： //jsfiddle.net/bs14zzeb/9/

Answer 2

使用內聯塊時，不要忘記設置vertical-align屬性^MDN

 .outer { background-color: red; } .inner { display: inline-block; vertical-align: top; /* tada!!!! */ width: 480px; height: 140px; background-color: green; } 

 <div class="outer"> <div class="inner"></div> </div> 

Answer 3

內聯元素的默認垂直對齊方式是基線，因此您需要將其設置為頂部或中間：

 .outer { background-color: red; } .inner { display: inline-block; width: 480px; height: 140px; background-color: green; vertical-align:top; } 

 <div class="outer"> <div class="inner"></div> </div> 

Answer 4

這是因為你的#inner的顯示屬性設置為inline-block 。 要修復，請將顯示更改為block ，或將vertical-align屬性設置為top 。

display: inline-block ：

 .outer { background-color: red; } .inner { width: 480px; height: 140px; background-color: green; } 

 <div class="outer"> <div class="inner"></div> </div> 

vertical-align: 0 ：

 .outer { background-color: red; } .inner { display: inline-block; vertical-align: top; width: 480px; height: 140px; background-color: green; } 

 <div class="outer"> <div class="inner"></div> </div> 

Answer 5

問題是display: inline-block; 屬性。 嘗試display: block; 代替。

http://jsfiddle.net/bs14zzeb/7/

Answer 6

.outer{font-size:0}將完成這項工作

 .outer { background-color: red; font-size:0 } .inner { display: inline-block; width: 480px; height: 140px; background-color: green; } 

 <div class="outer"> <div class="inner"></div> </div> 

Answer 7

.outer {
    line-height: 0px;
}