inline-block布局产生间隙

布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。

.top>.logo>.nav {
    float: right;
    line-height: 106px;
}
.top>.logo>.nav li{
    display: inline-block;
    text-align: center;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 14px;
    color: #666666；
}

页面效果如图所示

原因：**inline-block元素间有空格或是换行，因此产生了间隙。
解决办法：
1.空格符本质上就是个字符，与a,b,c,d这些字符是个同一个属性的东西，只是他是空格，透明的看不见而已（但可以选中）。所以，只要我们使用让文字宽度为0的那些方法，就可以解决inline-block元素间换行符间隙的问题。

.top>.logo>.nav {
        /* font-size: 0; */
    }

2.给产生间隙的元素添加浮动也是可以很好的解决这一问题的

.top>.logo>.nav li{
        /* float: left; */
        display: inline-block;
        text-align: center;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 14px;
        color: #666666；
    }