为什么带有文本的div与没有文本的div不在同一行？

Question

通过在代码段下面运行可以看到，如果所有div都没有文本，或者所有div都具有文本，那么它们将位于同一行。 但是，如果一个或多个为空，而其他具有文本，则它们不会出现在同一行上。 为什么会这样？以及如何克服它？

.Outer
{
  border: 1px solid black;
}

.D
{
  width: 50px;
  height: 20px;
  display: inline-block;
  background-color: lightblue;
  margin: 10px;
  text-align: center;
}

<div class="Outer">
  <div class="D"></div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D">abc</div>
  <div class="D">abc</div>
</div>

Answer 1

我不知道为什么，也许他们有不同的基准。但是您可以强迫他们在top（或根据需要在中间或底部）保持垂直对齐，并帮助他们找到共同的基线！

.Outer
{
  border: 1px solid black;
}

.D
{
  width: 50px;
  height: 20px;
  display: inline-block;
  background-color: lightblue;
  margin: 10px;
  text-align: center;
  vertical-align:top;
}

<div class="Outer">
  <div class="D"></div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D">abc</div>
  <div class="D">abc</div>
</div>