布局。两个包含内容的内联框，其中一个框被分成其他框

Question

期望的结果：class inline 的两个 div 应该在同一水平面上（第二个包含另外两个包含一些内容的 div）。

但是，如下图所示，两个div 没有垂直对齐。如果我从两个 .inside div 中删除内容（单词 "text"），它们会按预期排列。

如何让他们排队？这是什么原因造成的？

.inline,
.inside {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
}
.inline {
  display: inline-block;
  background-color: chartreuse;
}
.inside {
  height: 48px;
  background-color: salmon;
  border: solid 1px black;
}

<div class="inline">
</div>

<div class="inline">
  <div class="inside">text</div>
  <div class="inside">text</div>
</div>

<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>

<div class="inline">
  <div class="inside"></div>
  <div class="inside"></div>
</div>

Answer 1

.inline {    
vertical-align: top;
}

谢谢大家

布局。两个包含内容的内联框，其中一个框被分成其他框

Layout. Two inline boxes with content where one is divided into other boxes

html

css

layout

inline