Nested divs bigger than parent div

Question

I am using CSS to skin a scroll bar that is created using JavaScript.

.scrollbar-track{
    background: black;
    height: 10px;
}
 
.scrollbar-thumb{
    cursor: default;
    border: 1px red solid;
    width: 50px;
    padding: 0;
}

.scrollbar-thumb-first{
    display: inline-block;
    background: green;
    width: 5px;
    height: 10px;
}
 
.scrollbar-thumb-middle{
    display: inline-block;
    background: red;
    height: 10px;
    width: 20px;
}
 
.scrollbar-thumb-last{
    display: inline-block;
    background: blue;
    width: 5px;
    height: 10px;
}

<div class="scrollbar">
    <div class="scrollbar-track" style="width: 970px;">
        <div class="scrollbar-thumb">
            <span class="scrollbar-thumb-first"></span>
            <span class="scrollbar-thumb-middle"></span>
            <span class="scrollbar-thumb-last"></span>
        </div>
    </div>
</div>

And this is the fiddle: http://jsfiddle.net/w27wM/8/

Why is the inner div somehow larger than the parent div? Even with margin and paddings set to 0, the issue still remain.

Answer 1

Issue resolved by changing all the display: inline-block to float: left.

The problem may be related to this question, but removing all the whitespace didn't fix it for me. This might be due to the node being created in javascript.

Answer 2

Its a simple problem. By default the span line-height is 20px. An inline-block element read line-height to vertical-align.

So solution is either specify

line-height: 10px; or float: left;

Eg:

.scrollbar-thumb span{
   line-height: 10px;
}

or

.scrollbar-thumb span{
   float: left;
}