CSS:为什么这个内联 block div 不显示在同一行上？

Question

我一直在尝试在 div 元素上使用 display:inline-block，我想找出为什么我的两个内部 div 元素没有显示在同一行上。两个 div 都设置为 200px 的宽度，它们的父 div 设置为 400px。

如果我将内部 div 设置为向左浮动而不是使用 inner-block 它会按预期工作。

代码片段如下:

注意:我已经将 box-sizing 设置为 border-box。所以我假设这会使两个内部 div 恰好为 200px，即使边框为 1px。

* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0
}
.container {
  width: 400px;
}
.inner {
  border: 1px solid black;
  padding: 10px 0;
  width: 200px;
  display: inline-block;
}

<h1>Why does this display on two lines?</h1>
<div class="container">
  <div class="inner">Testing border box property</div>
  <div class="inner">Second div</div>
</div>

Answer 1

您可以通过将 font-size:0px; 添加到父元素 (.container) 来移除 inline-block 元素之间的空白然后将 font-size(例如 16px)添加到子(.inner)元素。

* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0
}
.container {
  width: 400px;
  font-size:0px;
}
.inner {
  border: 1px solid black;
  padding: 10px 0;
  width: 200px;
  display: inline-block;
  font-size: 16px;
}

<h1>Why does this display on two lines?</h1>
<div class="container">
  <div class="inner">Testing border box property</div>
  <div class="inner">Second div</div>
</div>