CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10390

CSS display inline-block gaps in between elements

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?

Upvotes: 1

Views: 924

Answers (3)

LoopCoder
LoopCoder

Reputation: 182

try this....

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

Upvotes: 1

user5831063
user5831063

Reputation:

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

Upvotes: 2

cst1992
cst1992

Reputation: 3931

By nature.

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

Upvotes: 1

Related Questions