在第一个兄弟div之后，内联块元素正在蹒跚而行

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：

将元素与顶部对齐

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将vertical-align: top;设置为.home-img-wording-blocks项

即可

Answer 3

通过隐藏div的溢出并确保没有应用无意的边距或填充的解决方案：

＆＃13;

＆＃13;

* {
  margin:0;
  padding:0;
}
#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;
    overflow:hidden;
}
.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;