去除inline-block间距

去除inline-block间距

通过display:inline-block设置元素为水平时，相邻元素之间会有几px的间距：

html:

<ul class="list">
    <li class="item">0</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
</ul>

css:

.item {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color:#fff;
    background:#bb7819;
}

去除此间距的其中一种方法：

1.给父元素设置font-size:0;
2.给子元素设置字体大小

css:

.list {
   font-size: 0;
}

.item {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color:#fff;
    background:#bb7819;
    font-size: 16px;
}