What is the little white gap for my css? : <!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    body{
          margin:0px;
          padding:0px;}
    div{
        border:1px solid black;
        box-sizing:border-box;
        font-size:30px;}
    #wrapper{
        width:900px;
        margin:0px auto;}
    #header{
        width:100%;
        height:100px;
        background:red;}
    #container{
        width:100%;
        height:100px;
        background:black;}
    #mainBox{
        width:75%;
        height:150px;
        background:blue;
        float:left;
        }
    #sideBox{
        width:25%;
        height:100px;
        background:yellow;
        float:left;
        }
    #footer{
        clear:both;
        width:100%;
        height:50px;
        background:white;
        }
<!-- language: lang-html -->

    <body>
    <div id="wrapper">
        <div id="header">this is the header
        </div>
        <div id="container">
            <div id="mainBox">main box
            </div>
            <div id="sideBox">side box
            </div>
        </div>
        <div id="footer">this is the footer
        </div>
    </div>
<!-- end snippet -->

[![enter image description here][1]][1]

There is a little white gap on the downside of mainBox,what is it and which cause it?

  [1]: http://i.stack.imgur.com/jeFP4.png