CODEWITHSUNDEEP
htmlcss
ocajian
ocajian

Reputation: 687

CSS issue with using display:inline-block

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

Upvotes: 1

Views: 238

Answers (4)

Danis
Danis

Reputation: 2110

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

Upvotes: 1

Mo.
Mo.

Reputation: 27513

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/

Upvotes: 1

isogram
isogram

Reputation: 318

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

Upvotes: 2

ocajian
ocajian

Reputation: 687

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>

Upvotes: 1

Related Questions