去除html中多个 div 换行后，有空隙的办法

例如：

 

<style type="text/css">
    .Container01 {
        width: 600px;
        background-color: aqua;
    }

    .ContainerItem01 {
        width: 20px;
        height: 20px;
        background-color: blanchedalmond;
        display: inline-block;
    }
</style>
<div class="Container01">
    <div class="ContainerItem01">1</div> <!-- div换行了 -->
    <div class="ContainerItem01">2</div> <!-- div换行了 -->
    <div class="ContainerItem01">3</div> <!-- div换行了-->
    <div class="ContainerItem01">4</div>
    <div class="ContainerItem01">5</div>
    <div class="ContainerItem01">6</div>
    <div class="ContainerItem01">7</div>
</div>

产生此问题的原因：浏览器在编译的时候，将换行符编译成了空格，空格的大小取决于不同的浏览器。

解决办法：将间隔中的字体大小设置为0

<style type="text/css">
    .Container01 {
        width: 600px;
        background-color: aqua;
        font-size:0px; /** 重点 **/
    }

    .ContainerItem01 {
        width: 20px;
        height: 20px;
        background-color: blanchedalmond;
        display: inline-block;
        font-size:14px; /** 重点 **/
    }
</style>
<div class="Container01">
    <div class="ContainerItem01">1</div>
    <div class="ContainerItem01">2</div>
    <div class="ContainerItem01">3</div>
    <div class="ContainerItem01">4</div>
    <div class="ContainerItem01">5</div>
    <div class="ContainerItem01">6</div>
    <div class="ContainerItem01">7</div>
</div>