给div使用display:inline-block产生的问题

使用display:inline-block产生的问题

给两个div设置了display:inline-block，也控制了两个div的长度，但两个div不在同一行
案例：

    ---div部分---
    <div id="div0">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
    
    ---css部分---
     #div0{
            width: 300px ;
            height: 300px ;
            background: burlywood ;
          
        }

        #div1{
            width: 150px ;
            height: 150px ;
            display: inline-block;
            background: orange ;
        }

        #div2{
            width: 150px ;
            height: 150px ;
            display: inline-block;
            background: skyblue ;
        }

结果是这样子的：

解决方案：
在父元素div0中添加 font-size：0 即可使得两元素同行(需要在子元素中重新设置font-size的font-size)

        #div0{
            width: 300px ;
            height: 300px ;
            background: burlywood ;
            font-size: 0 ;   
        }

结果：

问题解决

如果两者在同一行，但却不对齐的话 给两个div设置 vertical-align:top 即可