html - 別の inline-block 要素にネストされた inline-block 要素には、offsetTop があります

Question

私はHTMLを初めて学習していますが、今では次のようなコードがあります

<div id="container" style="height:300px;width:500px;font-size:0">
    <div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;">
        <div id="wrapper" style="height:10%;">
            <div style="display: inline-block; background: red; width: 50%; height: 100%;"></div>
            <div style="display: inline-block; background: blue; width: 50%; height: 100%;"></div>
        </div>
    </div>
    <div id="rightBox" style="display: inline-block; background: green; width: 50%; height: 100%;"></div>
</div>

(そして、http://jsfiddle.net/Simon_Chan/Z3WyA/に投稿しました)

leftBoxに大きな offsetTop があることがわかりますが、wrapper または wrapperの高さが 100%であるか、またはに要素がないrightBox 場合wrapper、これらすべての条件でleftBoxoffsetTop がありません。

なぜそれをするのですか？そして、それを取り除く方法は？

ありがとう！