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

Question

我一直在试验display:inline-blockdiv元素,我试图找出为什么我的两个内部div元素不在同一行上显示.两个div都设置为200px的宽度,其父div设置为400px.

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

代码段如下:

注意:我已将box-sizing设置为border-box.因此,我认为即使使用1px边框,这也会使两个内部div完全相差200px.

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

您可以inline-block通过添加font-size:0px;父元素(.container)然后添加font-size(例如16px)到child(.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>