具有line-block屬性的文本為空div與div

Question

想知道這種行為的原因。

的CSS

div {
   display: inline-block;
   margin-right: 2px;
   width: 20px;
   background-color: red;
}

空div

<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>

行為：元素從下到上（高度）增加

帶有文字的div

<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>

行為：元素從頂部到底部（高度）增加

觀看實際操作： http ： //jsfiddle.net/8GGYm/

Answer 1

基本上，它與vertical-align：的計算方式有關。 因此，如果您將vertical-aling：bottom; css中的屬性，那么您會注意到無論帶或不帶文本，它都是相同的。

您可以閱讀此以獲取更多詳細信息。

當div不包含內容時，則不會在框中繪制填充（即，當為0時，如果存在內容，則瀏覽器會計算填充的位置）。 因此，在計算和不顯示文本時都存在一點差異。

希望這對您有所幫助。

Answer 2

嗨，請參閱此處： http : //jsfiddle.net/dd24z/默認情況下，文本與頂部垂直對齊，但是您可以更改該行為；

div {
    display: inline-block;
    margin-right: 2px;
    width: 20px;
    background-color: red;
    vertical-align: bottom;
}

http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height

“垂直對齊”：基線將框的基線與父框的基線對齊。 如果框沒有基線，則將框的底部與父母的基線對齊。

Answer 3

加

vertical-align: bottom;

到您的CSS。 希望它能按您希望的那樣工作。

Answer 4

我想這可以通過與div無關的文本對齊方式來解釋。

文本放置在div中時，默認情況下垂直對齊到左上角。 那些沒有文本的div並排對齊（內聯塊），向下擴展頁面。 如果添加另一個div，則會看到第二個標題進一步向下。

<h1>Empty div</h1>
Some text
    <div style="height:20px;"></div>
    <div style="height:40px;"></div>
    <div style="height:60px;"></div>
    <div style="height:80px;"></div>
continuing here

<h2>Div with text</h2>
Some text 
    <div style="height:20px;">20</div>
    <div style="height:40px;">40</div>
    <div style="height:60px;">60</div>
    <div style="height:80px;">80</div>
continuing here

...

div {
       display: inline-block;
       margin-right: 2px;
       width: 20px;
       background-color: red;
    }

小提琴

在上面的小提琴中，您可以看到文本行是“指南”。

也許這就是解釋：一旦div中包含文本，他們就會將其與周圍的文本對齊，如果不存在，則它們的底線將對齊。

對不起，也許不是很清楚，但希望您能理解我的觀點。