CSS display inline-block gaps in between elements

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?

This should help http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Nenad Vracar, Mar 12 '16 at 13:18

score 2 · Answer 1 · edited May 23 '17 at 11:45

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

score 1 · Accepted Answer · answered Mar 12 '16 at 13:19

1

By nature.

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

answered Mar 12 '16 at 13:19

cst1992

2,429
21
36

score 1 · Answer 3 · answered Mar 12 '16 at 13:23

1

try this....

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

answered Mar 12 '16 at 13:23

LoopCoder

162
6

CSS display inline-block gaps in between elements

3 Answers3