Where is this extra space between divs coming from?

Question

http://www.lethalmonk6.byethost24.com/index.html

If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?

Answer 1

You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.

To elaborate... if you're using display: inline-block do this:

<div></div><div></div>

Instead of this:

<div></div>
<div></div> // White space is added because of the new line

Answer 2

I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...

All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).

So, here's a basic example:

<div class="font-zero">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
</div>

<style>
    .font-zero { font-size: 0; }
    .inline-block { display: inline-block; }
</style>

With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.

Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)