Firefox/Gecko adding spacing around inline-block divs?

Question

I know that the real goal I'm seeking is the css holy grail, but in this really simple experiment, I'm getting "phantom" spacing that I'm hoping someone can explain.

The following occurs in Firefox, but not in Chrome (though Chrome has it's own issues I'll address later):

HTML:

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS:

#wrapper {
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 250px;
    height: 90px;
    background-color: red;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

Notice I've used background-color instead of borders, so that any box-spacing issues are not in play (that I know of).

If I inspect each div (outer and inner) in Firebug, the widths are correct, yet there is clearly a gap between each div and the third div wraps to the next line.

This happens until I set the width to 761px, with each div having a gap of about 3-4 pixels between each inner div and 1-2 pixels after the last.

So with all margins and padding and borders turned off, where is this spacing coming from and is there a way (without floats or negative margins) to set this spacing to 0?

I thought maybe Firefox is applying inline properties such as word-spacing or letter-spacing, but I've tried turning all of these off as well.

Anyone know where this space comes from?

sandeep · Accepted Answer · 2012-02-29T17:36:50.133

2

Define font-size:0; to it's parent DIV. Write like this:

#wrapper {
    font-size:0;
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div{
 font-size:15px;
}

Check this http://jsfiddle.net/CXr5A/

OR

You can write your inner div's in one line like this:

<div id="wrapper">
    <div id="div1"></div><div id="div2"></div><div id="div3"></div>
</div>

Check this http://jsfiddle.net/CXr5A/2/

edited Feb 29 '12 at 17:36

answered Feb 29 '12 at 15:28

sandeep

91,313
23
137
155

1

This is IMHO the best solution, and if the `rem` unit was supported by all browsers, it would be the paradise. – Fabien Ménager Feb 29 '12 at 16:32
@FabienMénager I hadn't heard of `rem` until you mentioned it, so thanks for the new addition to my arsenal. I'm not sure how it would apply in this case, however. Would using `rem` keep me from having to set the font-size at each level? On a related note, I'm still annoyed that the `em` unit is sometimes relative to the browser's default for that element while other times seems relative to the browser's global font size. Again, thanks for the new info; what a difference a letter makes. – Anthony Feb 29 '12 at 17:11
@sandeep I'm torn between your answer and blackpla9ue ftw. Can you enlighten me on the benefits/distinction of setting the outer-div font-size to 0 vs each inner-div to 15px? Not trying to start a dust-up, just eager to get a bit more info on both techniques and their potential graces/pitfalls. Thanks. – Anthony Feb 29 '12 at 17:16
@Anthony blackpla9ue is wrong because OP ask for spacing between inline-block & It's just a trick check this http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – sandeep Feb 29 '12 at 17:32
@Anthony there is an other way in that you have change your HTML structure check this http://jsfiddle.net/CXr5A/2/ – sandeep Feb 29 '12 at 17:34
@FabienMénager - nvm, I totally see it now. Serious BS that it's the only solution without setting a static font-size. Double-thanks for the tip! – Anthony Feb 29 '12 at 17:44

score 1 · Answer 2 · edited Feb 29 '12 at 17:17

It is something to do with the font-size. If you are wondering about the right way to accomplish what you have tried, use this CSS instead and give it a go.

Tip : always make it a habit to apply a global reset before you start your CSS file.

CSS :

*{
    padding: 0px;
    margin: 0px;

}

#wrapper {
    width: 750px;
    height: 100px;
    background-color: yellow;

}

#wrapper div {
    width: 250px;
    height: 90px;
    display: block;
    float: left;
    background-color: red;
    font-size:15px;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

score 0 · Answer 3 · answered Feb 29 '12 at 15:57

0

Get rid of the spaces in the HTML. That would solve your problem.

<div id="wrapper">
<div id="div1"></div><div id="div2"></div><div id="div3"></div>
</div>

You could instead add div{margin-right: -4px;}

Firefox/Gecko adding spacing around inline-block divs?

HTML:

CSS:

3 Answers3