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?

Percolator

possible duplicate of How to remove the space between inline-block elements? – Lascar

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

Subsistence

Is there a way I can remove the space? – Percolator

Yes, by actually making the divs adjacent in your markup without any spaces or line breaks between them. See my added example... – Subsistence

Answer 2

As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.

Aubreir

content: "." doesnt really fix my wrapping issue, maybe I am not using it correctly? – Percolator

You should put content: "." on the <div id="container"> element. – Aubreir

Answer 3

As Lucifer Sam said, display:inline-block will show you space between element if there are one.

The slution given is good:

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

But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:

   <div>
       large content
   </div><!-- No space
--><div>
       large content 2
   </div>

Escapee

Answer 4

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 :)

Frontality

Answer 5

I just stumbled here and my solution was to set overflow: hidden; on one of the elements that in my case was using filter: blur(5px);.

Malonis