CSS：为什么这个inline-block div不显示在同一行上？

我一直在尝试display:inline-block div元素，我试图找出为什么我的两个内部div元素不显示在同一行上。这两个div都设置为200px的宽度，并将其父div设置为400px。CSS：为什么这个inline-block div不显示在同一行上？

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

的代码片段如下：

注：我已经设置框上浆边境盒。所以我认为这将使两个内部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>

来源

2014-09-30 neodymium

您可以通过添加font-size:0px;父元素（.container）删除inline-block元素之间的空格然后加入font-size（例如16像素）儿童（.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>

来源

2014-09-30 01:01:53 Anonymous

啊白色空间！谢谢！或者，我可以在同一行代码内部div，两个元素之间没有任何空格。 – neodymium 2014-09-30 01:19:03