解决问题之一：font-size 影响页面布局

为实现效果如下：

遇到的问题：

实现方法，border bottom+right 然后 nth（4n）没有没有 right
但是这样会造成一个问题div之前会有空隙，如下图：

为什么会遇到这个问题，怎么解决？

原因：因为页面默认的font-size字体大小影响了

解决：重置body,html{font-size:0}或者可以直接在当前元素的父元素设置font-size：0，因为全局设置可能会影响到页面的其它地方，会造成明明写了字怎么页面不显示的问题，即：0*0的情况，这点需要注意。

实现方式具体如下：

// html
<div class="apply-lists">
  <ul>
  	<li><img src="pic1.png" alt="logo"><p>滴滴出行</p></li>
  	<li><img src="pic2.png" alt="logo"><p>富途证券</p></li>
  	...
  </ul>
</div>
//css
.apply-lists{
    width: 95%;
    margin: 0 auto;
    text-align: center;
}
.apply-lists li{
    font-size: 14px;
    text-align: center;
    line-height:19px;
    color: #535353;
    font-family:MicrosoftYaHei-Bold;
    display: inline-block;
    font-weight: bold;
    width: 24%;
    margin: 0 auto;
    border-bottom: 1px solid#ECECEC;
    border-right: 1px solid#ECECEC;
    position: relative;
    padding: 3% 0;
}
.apply-lists li img{
  width: 124px;
  height: 40px;
}
.apply-lists li:nth-child(4),li:nth-child(8),li:nth-child(12){
    border-right: none;
}
.apply-lists li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12){
    border-bottom: none;
}