行内块元素在第一个兄弟元素后惊人地下降

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>