我的元素之间奇怪的空白

Question

so for some reason there is some white space between my elements (using chrome browser). I tried inspecting it and couldn't solve the issue. Not sure what could be causing it at all. I hosted a demo page here so you can see what I am talking about.

So any idea what would be causing this? I'll provide my CSS below for the elements in question. As you can see the blue element to the left does not have this same issue so I assume it has something to do with the gear elements.

This is the only code I have on it right now:

.gear-item {
    position: relative;
    height: 320px;
    width: 320px;
    padding: 80px 25px 0px 55px;
    display: inline-block;
    clear: none;
}

.gear-item:nth-child(even) {
    background: #252627;
}

Answer 1

the whitespace you see is the actual whitespace in the html, inline elements will show whitespace between then, the easiest solution is to float the elements

.gear-item {
    position: relative;
    height: 320px;
    width: 320px;
    padding: 80px 25px 0px 55px;
    display: block;
    float:left;
    clear: none;
}

.gear-item:nth-child(even) {
    background: #252627;
}

Answer 2

Inline elements are sensitive to the white space in your code. Remove the white space in your code between your divs and the space goes away.

Answer 3

Its caused by using inline-block . Apparently the same problem described here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ . So it's actually the whitespace in your markup!

A quick fix would be using floats instead for gear-item :

display: block;
float: left;

(or some of the other solutions outlined in the link I mentioned)