How to eliminate white space between element positioned with display:inline-block?

Question

I need to display three boxes in line consecutively, using the following code I get always a "gap" of few pixel between them.

I would like to know:

How to have the box, one after another, no space? I know I can add some minus pixel but I am looking for a more consolidate solution
Why this happen? Can I re-setter help to solve this problem?
Do you know any other better alternative?

div {
    box-sizing: border-box
}
.box {
    width:50px;
    height:50px;
    background-color:red;
}
#a, #b, #c {
    display:inline-block;
}

<div id="container">
    <div id="a" class="box"></div>
    <div id="b" class="box"></div>
    <div id="c" class="box"></div>
</div>

There were three or four techniques with setting `font-size: 0` on parent, using comment blocks between the inline block elements, using negative margins etc. I am sure there was an existing question. — Harry, Nov 16 '15 at 09:47
Related: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ — GibboK, Nov 16 '15 at 09:53
Related: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — GibboK, Nov 16 '15 at 11:27
I solved this issue using display: flex; on the parent container, example here https://jsfiddle.net/oc9vpx95/ this works fine as I am targeting recent browser with support of css3 — GibboK, Nov 16 '15 at 11:28

score 0 · Answer 1 · answered Nov 16 '15 at 09:49

0

Yep font-size: 0px to the parent and vertical-align: top.

answered Nov 16 '15 at 09:49

Vijay Dev

1 Answers1