两个DIV宽度和为100%，均为inline-block,却不在一条水平线上

<div class="big">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

.big {
    width: 100%;
    height: 200px;
    background: yellow;
}

.child1 {
    width: 30%;
    height: 100%;
    background: green;
    display: inline-block;
}

.child2 {
    width: 70%;
    height: 100%;
    background: blue;
    display: inline-block;
    
}
效果如图

没在一行，并且中间有条缝。

原因：两个div之间有空格

解决：给最外层div添加：{font-size:0}