问题:

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?

回答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

回答2:

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>

回答3:

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.