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
– davidcondrey, Commented Sep 12, 2014 at 9:58
Your code is working check here http://jsfiddle.net/s7dxxro0/4/ — Amit
– Amit, Commented Sep 12, 2014 at 9:59
You could try this, as the line breaks add space between your boxes. — user1945782
– user1945782, Commented Sep 12, 2014 at 9: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
– GolezTrol, Commented Sep 12, 2014 at 10:02
Once again, I recommend reading css-tricks.com/fighting-the-space-between-inline-block-elements — C3roe
– C3roe, Commented Sep 12, 2014 at 10:02

isogram · Accepted Answer · 2014-09-12 10:04:41Z

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, 2014 at 10:04

isogram

3181 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GolezTrol Over a year ago

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.

Alohci Over a year ago

@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.

isogram Over a year ago

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.

GolezTrol Over a year ago

@isogram You might want to look into rem for that.

ocajian · Accepted Answer · 2014-09-12 10:02:37Z

1

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>

answered Sep 12, 2014 at 10:02

ocajian

6875 gold badges15 silver badges29 bronze badges

Comments

Mo. · Accepted Answer · 2014-09-12 10:05:14Z

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, 2014 at 10:05

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

Comments

Danis · Accepted Answer · 2014-09-12 10:05:22Z

1

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

answered Sep 12, 2014 at 10:05

Danis

2,1303 gold badges17 silver badges29 bronze badges

Collectives™ on Stack Overflow

CSS issue with using display:inline-block

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related