Odd White Space In Between my Elements

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

Which whitespace are you referring to? Above the black boxes? Did you try zeroing the margin/padding? — Carcigenicate, Feb 03 '17 at 16:57
Dupe of http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements?rq=1 — j08691, Feb 03 '17 at 16:59
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — , Feb 03 '17 at 17:00

score 0 · Accepted Answer · answered Feb 03 '17 at 16:58

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

score 0 · Answer 2 · answered Feb 03 '17 at 16:58

0

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.

answered Feb 03 '17 at 16:58

j08691

204,283
31
260
272

score 0 · Answer 3 · answered Feb 03 '17 at 17:01

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)

Odd White Space In Between my Elements

3 Answers3