CSS在元素之间显示内联块间隙

Question

HTML:

<div id='container'>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
</div>

CSS:

#container {
    width: 960px;
    height: 960px;
    background-color: #ccc;
}

.box {
    width: 300px;
    height: 300px;
    background-color: blue;
    display: inline-block;
}

Result: https://jsfiddle.net/58fmcabz/

When I use table-cell in the display property the gaps disappear. I tried removing margin and padding using the .box class to no avail. Why are the gaps there?

Answer 1

The easy solution is to add a float to your elements:

.box{width:300px; height:300px; display:inline-block; background-color:blue; float:left;}

That's it solved. The inline-block property is kinda creepy and I had to bear that for a whole day when I had the problem, a simple float solves the problem.

Someone asked the same question here- Unwanted margin in inline-block list items

Answer 2

By nature.

Here's a link for you: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

try this....

.box {
     width: 300px;
     height: 300px;
     background-color: blue;
     display: inline-block; 
     float:left;
}