为什么等高inline-block元素不在同一高度上?

Question

效果如图：

html:

<div id = "bg6">
    <div id = "bg6_left">
        <div>新世界</div>
        <div>TIME</div>
        <div>@新世界-北京</div>
        <div>2016.04.01</div>
    </div>
    <div id = "bg6_right">
        <div id = "bg6_wrap">
            <div>新世界／01</div>
            <p>新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个新世界是个</p>
            <input type="submit" name="" id = "bg6_btn" value="更多详情">
            <div id = "cir"></div>
        </div>
    </div>
    </div>

css:

#bg6 {
    width: 1400px;
    height: 660px;
    letter-spacing: 0px;
    /*word-spacing: -2px;*/
}
#bg6_left {
    display: inline-block;
    width: 1000px;
    height: 660px;
    background:url(run.jpg);
    background-size: cover;
    text-align: center;


}
#bg6_right{
    display: inline-block;
    width: 400px;
    height: 660px;
    background-color: #aaa;
    margin-left: -5px;
}
#bg6_wrap {
    display: inline-block;
    width: 400px;
    height: 660px;
}

按道理说二者是line-box，底部在同一水平线的，为啥会有高度差？

Answer 1

基线对齐问题，加上vertical-align: top;