CSS issue with using display:inline-block

Question

I have set up 4 divs all of width: 120px placed inside of a wrapper of 240px wide.

JSFiddle here - http://jsfiddle.net/s7dxxro0/1/

HTML:

<div id="wrapper">  
  <div class="primary-content-block" id="about">
  </div>
  <div class="primary-content-block" id="gallery">
  </div>
  <div class="primary-content-block" id="contact">
  </div>
  <div class="primary-content-block" id="news">
  </div>
</div>

CSS:

#wrapper {
margin:0 auto;
width: 240px;
}

.primary-content-block {
display:inline-block;
vertical-align:top;
width: 120px;
height: 120px;
}

#about {
background: radial-gradient(#5cc4ba, #00aa99);
}

#gallery {
background: radial-gradient(#5cc4ba, #00aa99);
}

#contact {
background: radial-gradient(#5cc4ba, #00aa99);
}

#news {
background: radial-gradient(#5cc4ba, #00aa99);
} 

However the elements to not display next to each other due to a slight margin being applied to my 4 blocks.

Where does this what seems to be a margin come from? How do I remove it?

This works when I use float:left in place of display:inline-block but I would prefer not to use floats for many reasons

Answer 1

This is because there are spaces between your inline blocks. The elements are separated by whitespace (new lines also count for this unfortunately), so the browser puts a space in between them as if they were words.

There's several ways to battle this.

Put the html tags side to side:

<div class="primary-content-block" id="about">
</div><div class="primary-content-block" id="gallery">
</div><div class="primary-content-block" id="contact">

Use a negative margin on the divs:

.primary-content-block {
    margin-right: -4px;
}

Set the font size to 0:

#wrapper {
    font-size: 0;
}
#wrapper > div {
    font-size: 12px /* or whatever it was before */
}

Or in case of <p> elements (not divs, unfortunately) just leave out the closing tag:

<p class="primary-content-block" id="about">
<p class="primary-content-block" id="gallery">

Source: css-tricks

Answer 2

The issue was caused by linebreaks between my divs

The fix would be:

<div id="wrapper">  
  <div class="primary-content-block" id="about"></div><div class="primary-content-block" id="gallery"></div><div class="primary-content-block" id="contact"></div><div class="primary-content-block" id="news"></div>
</div>

Answer 3

you can simple add float: left the div

.primary-content-block {
    /* display:inline-block; */
    vertical-align:top;
    width: 120px;
    height: 120px;
    float: left;
}

like this http://jsfiddle.net/s7dxxro0/10/

Answer 4

This isn't a "bug" (I don't think). It's just the way setting elements on a line works.The spaces between these blocks are just like spaces between words. You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent)

.primary-content-block {
   display:inline-block;
   vertical-align:top;
   width: 120px;
   height: 120px;
}