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

add float:left; and increase the width of the container if it's not wide enough — davidcondrey, Sep 12 '14 at 09:58
Your code is working check here `http://jsfiddle.net/s7dxxro0/4/` — Amit, Sep 12 '14 at 09:59
You could try [this](http://jsfiddle.net/s7dxxro0/3/), as the line breaks add space between your boxes. — Paul, Sep 12 '14 at 09:59
The problem is the [white space between the divs](http://css-tricks.com/fighting-the-space-between-inline-block-elements/). This has been asked quite some times before. — GolezTrol, Sep 12 '14 at 09:59
That slight margin is caused by the space generated by the linebreaks. You can rather write the divs next to each other. Same question here: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — qtgye, Sep 12 '14 at 09:59
@dcc Don't add it. Either use `float: left` *or* use `display: inline-block`. Now you have two solutions for the same issue (displaying them side by side). Also note that `float: left` will introduce other problems, especially if the blocks have a slightly different height. So no, while it may seem so at first, `float: left` is not the proper solution to this problem. — GolezTrol, Sep 12 '14 at 10:02
Check this [fiddle](http://jsfiddle.net/lalu050/s7dxxro0/9/) — Lal, Sep 12 '14 at 10:02
Once again, I recommend reading http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — CBroe, Sep 12 '14 at 10:02
Agreed GolezTrol I do not want to use float:left due to the many issues is causes such as having no height value unless explicitly given — ocajian, Sep 12 '14 at 10:03

score 2 · Accepted Answer · answered Sep 12 '14 at 10:04

2

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

answered Sep 12 '14 at 10:04

isogram

318
1
7

I think negative margin is a bad solution, since you cannot know that the space is exactly 4px. The other solutions are good, and all of them will work. – GolezTrol Sep 12 '14 at 10:07
@GolezTrol - you generally know in context what negative margin you do need. It's not always 4px, but it's a rare case that a correct negative margin in either px or em can't be chosen. – Alohci Sep 12 '14 at 10:13
I agree Golez, it's not a perfect solution but I wanted to be complete. I don't like the font-size method either because it breaks `em` inheritance. – isogram Sep 12 '14 at 10:22
@isogram You might want to look into `rem` for that. – GolezTrol Sep 12 '14 at 11:10

score 1 · Answer 2 · answered Sep 12 '14 at 10:02

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>

score 1 · Answer 3 · answered Sep 12 '14 at 10:05

1

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/

answered Sep 12 '14 at 10:05

Mo.

26,306
36
159
225

score 1 · Answer 4 · answered Sep 12 '14 at 10:05

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;
}

CSS issue with using display:inline-block

4 Answers4