css two boxes could not divide 100% of the parent width

Question

Here is the JS fiddle: http://jsfiddle.net/nettrinity/8YXsQ/

<div class="outer-box">
    <div class="inner-one">30%</div>
    <div class="inner-two">70%</div>
</div>

I want them to divide 100%, but there is alway a gap between. What is it? since I set all margin, padding, and border to 0. Is it a bug?

Thank you!

yes, how can I delete the gap? – Nicolas S.Xu Feb 24 '14 at 16:21 — Nicolas S.Xu, Feb 24 '14 at 16:21

skreborn · Answer 1 · 2014-02-24T16:54:02.907

3

You have set the div elements to be inline-block, which causes them to act like simple text. What you see between them is a simple space. If you remove the linebreak from in between them, and set the second div's width to 70%, you will get the correct results.

http://jsfiddle.net/8YXsQ/9/

<div class="outer-box">
    <div class="inner-one"></div><div class="inner-two"></div>
</div>

Anyway, there are a few alternatives to inline and inline-block to place elements next to each other. Try using float:left, or display:table for the parent and display:table-cell for the child elements and see what best fits your needs.

edited Feb 24 '14 at 16:54

answered Feb 24 '14 at 16:24

skreborn

2,133
2
16
27

There are many reasons to use `inline-block` over `float` and one should not be preferred over the other. They both have their own issues...use of one or the other will depend entirely on the effect trying to be achieved. – Paulie_D Feb 24 '14 at 16:33
Thanks for this tip. It reminds me another painful puzzle about gap between li element. – Nicolas S.Xu Feb 24 '14 at 16:42
@Paulie_D You are perfectly right, good point. I will modify my answer accordingly. – skreborn Feb 24 '14 at 16:52

score 0 · Answer 2 · answered Feb 24 '14 at 16:22

please try: float:left; (I'am updated my jsfiddle link!)

http://jsfiddle.net/8YXsQ/8/

CSS:

    .outer-box {
    width:200px;
    background-color: #ccc;
    height:30px;
    margin:0;
    padding:0;
    border:0;
}
.inner-one {
    width:30%;
    background-color: yellow;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
    float:left;
}
.inner-two {
    width:70%;
    background-color: green;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
}

If you update the link, other people may not see the problem. — Nicolas S.Xu, Feb 24 '14 at 16:38

G-Cyrillus · Answer 3 · 2014-02-24T16:30:34.907

you can erase the gap setting font-size to 0 and back to a normal. http://jsfiddle.net/8YXsQ/3/

.outer-box {
    width:200px;
    background-color: #ccc;
    height:30px;
    margin:0;
    padding:0;
    border:0;
    font-size:0;
}
.inner-one {
    width:30%;
    background-color: yellow;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
    font-size:14px;
}
.inner-two {
    width:70%;
    background-color: green;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
    font-size:14px;
}

or remove the space in your html

<div class="outer-box">
    <div class="inner-one"></div><!--
    --><div class="inner-two"></div>
</div>

or

<div class="outer-box">
    <div class="inner-one"></div><div class="inner-two"></div>
</div>

You could use display:table; too http://jsfiddle.net/8YXsQ/11/

.outer-box {
    width:200px;
    display:table;
    border-collapse:collapse;
}
.inner-one, .inner-two {
    display:table-cell;
    background:green;
}
.inner-one {
    width:30%;
    background:yellow;
    height:1.2em; /* in case tested with no content */
}

score 0 · Answer 4 · answered Feb 24 '14 at 16:28

Removing the newline between divs did the trick :

<div class="outer-box">
    <div class="inner-one"></div><div class="inner-two"></div>
</div>

See updated fiddle

Another alternative would be to remove the font-size :

.outer-box {
    font-size:0;
}

Or just use float:left instead of display:inline-block...

score 0 · Answer 5 · edited May 23 '17 at 11:50

I am answering my own question. This problem is closely related to this one:

A Space between Inline-Block List Items

In short, as skreborn said, inline and inline block elements will not be 0 gap, even if you set the border, margin and padding to 0.

Maybe it is not suppose to be. The way to fix it is to set the parent font-size to 0. (re-set the width, font-size or height for children elements if they cllapse)

css two boxes could not divide 100% of the parent width

5 Answers5