display:line-block;标签四周间隔的处理方法

display:line-block;标签是个好东西，在有多个同级display:line-block;标签时，可以实现自动换行。

但是可恨的是，四周总是有非margin、padding、left、top、right、bottom属性的空白空间。

网上有很多解决办法，但是没有找到只用CSS就可以解决的办法，今天突发奇想竟然成功了。（写完才发现14年就有解决的文章了，为毛17年我没有找到，我那通找啊死的心都有了！）

我把未解决和已解决的相关代码发写在下面了，附带效果截图，就差几行CSS代码，我就不多说，自己对比看吧。

没有进行处理的相关代码和效果图：

html：

<div class="div">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
</div>

CSS：

.div{
    width: 100px;
    height: 100px;
    background-color: blue;
}
.block{
    display: inline-block;
    width: 30px;
    background-color: red;
    font-size: 12px;
}

效果图：

进行处理之后的相关代码和效果图：

CSS：

.div{
    width: 100px;
    height: 100px;
    font-size: 0px;
    background-color: blue;
}
.block{
    display: inline-block;
    width: 30px;
    background-color: red;
    font-size: 12px;
}

效果图