CSS---清除inline-block元素4px右边距

html

<div class="btn-group">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>

css

.btn-group{
            font-size: 0;
        }
        .btn-group i{
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #ccc;
        }

将inline-block元素所有容器的font-size设置为0。

图片默认也是inline-block元素，所以几张图片放在一起时会有4px的右边距