行內塊元素在第一個兄弟元素後驚人地下降

Question

我遇到了一個問題，我不確定原因。我有三個箱子，我想排成一道水平線，直到我在箱子裏面加上我的標題和描述。爲什麼添加標題和描述會產生這種驚人的效果？

你可以在我的代碼片段中看到它在做什麼。

#home-img-block-wording-container { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
} 
 
.home-img-wording-blocks { 
 
    width: 33%; 
 
    height: 100%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
} 
 
.home-img-wording-block-title { 
 
    padding-top: 20px; 
 
    font-size: 2em; 
 
} 
 
.home-img-wording-block-description { 
 
    padding: 25px 20px 0 20px; 
 
    font-size: 1.2em; 
 
    color: #adadad; 
 
}

<div id="home-img-block-wording-container"> 
 
    <div class="home-img-wording-blocks"> 
 
    <div class="home-img-wording-block-title">WEB DESIGN</div> 
 
    <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div> 
 
    </div> 
 
    <div class="home-img-wording-blocks"> 
 
    <div class="home-img-wording-block-title">ECOMMERCE</div> 
 
    <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div> 
 
    </div> 
 
    <div class="home-img-wording-blocks"> 
 
    <div class="home-img-wording-block-title">MARKETING STRATEGIES</div> 
 
    <div class="home-img-wording-block-description">MARKETING STRATEGIES</div> 
 
    </div> 
 
</div>

Answer 1

的問題是，在每一個內聯塊.home-img-wording-blocks元素中的文本被對齊到前一框的基線。

如上所述有關規範：

10.8 Line height calculations: the line-height and vertical-align properties

一個inline-block的基線是其最後一行盒的在正常流動的基線，除非它具有或者沒有在流線箱或者其overflow屬性的計算值不是visible，在這種情況下，基線是底部邊緣邊緣。

值得指出的是，vertical-align屬性的默認值爲baseline。要解決你的問題，你可以通過添加vertical-align: top對齊元素頂端：

#home-img-block-wording-container { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
} 
 
.home-img-wording-blocks { 
 
    width: 33%; 
 
    height: 100%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.home-img-wording-block-title { 
 
    padding-top: 20px; 
 
    font-size: 2em; 
 
} 
 
.home-img-wording-block-description { 
 
    padding: 25px 20px 0 20px; 
 
    font-size: 1.2em; 
 
    color: #adadad; 
 
}

<div id="home-img-block-wording-container"> 
 
    <div class="home-img-wording-blocks"> 
 
    <div class="home-img-wording-block-title">WEB DESIGN</div> 
 
    <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div> 
 
    </div> 
 
    <div class="home-img-wording-blocks"> 
 
    <div class="home-img-wording-block-title">ECOMMERCE</div> 
 
    <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div> 
 
    </div> 
 
    <div class="home-img-wording-blocks"> 
 
    <div class="home-img-wording-block-title">MARKETING STRATEGIES</div> 
 
    <div class="home-img-wording-block-description">MARKETING STRATEGIES</div> 
 
    </div> 
 
</div>

Answer 2

只需設置vertical-align: top;爲.home-img-wording-blocks項目

Answer 3

溶液通過隱藏你的div的溢出並確保不會出現無意的邊距或填充：

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#home-img-block-wording-container { 
 
    width: 100%; 
 
\t height: 400px; 
 
\t border: 1px solid black; 
 
} 
 
.home-img-wording-blocks { 
 
    width: 33%; 
 
\t height: 100%; 
 
\t text-align: center; 
 
\t border: 1px solid black; 
 
\t display: inline-block; 
 
    overflow:hidden; 
 
} 
 
.home-img-wording-block-title { 
 
\t padding-top: 20px; 
 
\t font-size: 2em; 
 
} 
 
.home-img-wording-block-description { 
 
\t padding: 25px 20px 0 20px; 
 
\t font-size: 1.2em; 
 
\t color: #adadad; 
 
}

<div id="home-img-block-wording-container"> 
 
      <div class="home-img-wording-blocks"> 
 
\t \t \t \t <div class="home-img-wording-block-title">WEB DESIGN</div> 
 
\t \t \t \t <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div> 
 
\t \t \t </div><div class="home-img-wording-blocks"> 
 
\t \t \t \t <div class="home-img-wording-block-title">ECOMMERCE</div> 
 
\t \t \t \t <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div> 
 
\t \t \t </div><div class="home-img-wording-blocks"> 
 
\t \t \t \t <div class="home-img-wording-block-title">MARKETING STRATEGIES</div> 
 
\t \t \t \t <div class="home-img-wording-block-description">MARKETING STRATEGIES</div> 
 
\t \t \t </div> 
 
     </div>