CSS: Why does this inline-block div not display on the same line?

Question

I've been experimenting with display:inline-block on div elements and I'm trying to work out why my two inner div elements are not displaying on the same line. Both divs are set to width of 200px and their parent div is set to 400px.

If I set the inner divs to float left instead of using inner-block it works as expected.

The code snippet is as below:

Note: that I've set box-sizing to border-box. So I assumed this would make both inner divs exactly 200px even with the 1px border.

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

You could remove the white space between inline-block elements by adding font-size:0px; to parent element (.container) then add font-size (e.g 16px) to child (.inner) elements.

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

Answer 2

You need to remove unnecessary spaces between your HTML tags or reset font-size to 0.

check it here :

Fighting the Space Between Inline Block Elements

There is more solutions on the link above.

Plus you can use display:block; float:left instead.