What is the space between these elements?

Question

What is the spacing (the red section) between the <div> elements in my code at JSFiddle? I have both padding and margin set to 0px. I don't know what's causing them. I have used F12 on chrome and determined that .column does not include it.

It's "whitespace" (due to `display: inline-block`): https://jsfiddle.net/b2xfpa6a/2/ — Jared Farrish, Sep 29 '15 at 23:12
Woah! I didn't realize whitespace could affect the display! Would you submit as an answer so I could set it as correct? — Fuzzyzilla, Sep 29 '15 at 23:13
Because whitespace in the source code doesn't disappear magically. If you don't want that space, see [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630) — Oriol, Sep 29 '15 at 23:14

score 1 · Accepted Answer · edited Sep 30 '15 at 00:03

1

That's the space between inline-blocks elements.

There are many ways to fix this, including:

Adding a negative margin to your elements
Giving a font-size of 0 to the parents
Removing the space between the closing and next opening tags with comments

You can see a highlight of these methods here.

edited Sep 30 '15 at 00:03

sawa

165,429
45
277
381

answered Sep 29 '15 at 23:15

Drown

5,852
1
30
49

score -1 · Answer 2 · edited Sep 29 '15 at 23:19

-1

You can solve it applying these rules

.boardCell {float:left;}
.column {display:block;}

edited Sep 29 '15 at 23:19

Alohci

78,296
16
112
156

answered Sep 29 '15 at 23:14

N. Soberon

7
2

What is the space between these elements?

2 Answers2