取消display:inline-block产生间隙最简单办法

方法一：父元素设置font-size:0;
产生原因：
因为标签不在同一行的回车导致的换行

<style>
    *{
        margin:0;
        padding:0;
    }
    .d1{
        width:750px;
        height:90px;
        font-size:0;
    }
    .d2,.d3{
        height:90px;
        display:inline-block;
        outline:none;
        border:none;
    }
    .d2{
        width:150px;
        background:#f00;
    }
    .d3{
        width:600px;
        background:#0ff;
    }
</style>
<div class="d1">
    <div class="d2"></div>
    <div class="d3"></div>
</div>

方法二：标签全写一行，但是这样对某些编译工具来说，不现实，格式化代码就会出现问题，个人认为不怎么好

<style>
    *{
        margin:0;
        padding:0;
    }
    .d1{
        width:750px;
        height:90px;
    }
    .d2,.d3{
        height:90px;
        display:inline-block;
        outline:none;
        border:none;
    }
    .d2{
        width:150px;
        background:#f00;
    }
    .d3{
        width:600px;
        background:#0ff;
    }
</style>
<div class="d1"><div class="d2"></div><div class="d3"></div></div>

方法三：借用注释标签

<style>
    *{
        margin:0;
        padding:0;
    }
    .d1{
        width:750px;
        height:90px;
        font-size:0;
    }
    .d2,.d3{
        height:90px;
        display:inline-block;
        outline:none;
        border:none;
    }
    .d2{
        width:150px;
        background:#f00;
    }
    .d3{
        width:600px;
        background:#0ff;
    }
</style>
<div class="d1">
    <div class="d2"></div><!--
    --><div class="d3"></div>
</div>