Why there are gaps in inline-block element

Question

Why Inline-block element have gaps in CSS. How can I prevent spaces between Inline-block elements. Here in the image child elements of container have spaces

.container {
   width:360px; height:360px; border:5px solid #999;
}
.childs {
  width:130px; height:130px; display: inline-block; border:1px solid #eee;
}

Answer 1

Most likely because you have spaces (or other whitespace such as new lines) between the elements in the HTML). Spaces are significant in inline content.

<div>
  <span>Otherwise</span>
  <span>these</span>
  <span>words</span>
  <span>would</span>
  <span>run</span>
  <span>together</span>
</div>

You can remove the spaces from the source, but you would probably be better off with a different layout mechanism such as flexbox.

div {
    display: flex;
    flex-wrap: wrap;
}

<div>
  <span>Then</span>
  <span>these</span>
  <span>words</span>
  <span>do</span>
  <span>run</span>
  <span>together</span>
</div>

Answer 2

You should try to remove the default style applied to some elements.

* {
 margin: 0;
 padding: 0;
}