【html5/css3】四种方法解决 li与li之间有看不见的空白间隔

场景需求：

有时，在写页面的时候，会需要将

• 这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个
• 元素之间会出现大约8px左右的空白间隙，下面举例说明看看这种现象：
  对应html：

• <div class="box">
  	<ul>
  		<li class="part1">red</li>
  		<li class="part2">blue</li>
  		<li class="part3">yellow</li>
  		<li class="part4">green</li>
  	</ul>
  </div>
  

  对应css：

  <style type="text/css">
      *{
          margin:0;
          padding:0;
      }
      body {
          width:100%;
      }
      ul li {
          list-style-type: none;
      }
      .box{
          width:600px;
          margin:0 auto;
          margin-top:100px;
          padding: 10px;
          border: 5px solid #000;
      }
      .box li {
          width:25%; 
          height: 150px;
          display:inline-block;
      }
      .part1 {background-color:red;}
      .part2 {background-color:blue;}
      .part3 {background-color:yellow;}
      .part4 {background-color:green;}
  </style>
  

  结果图示：

  引起这种空白间隔的原因：

  浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码

• 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

• 解决方案

  方法一：
  既然是因为<li>换行导致的，那就可以将<li>代码全部写在一排，如下：

  <div class="box">
  	<ul>
  		<li class="part1">red</li><li class="part2">blue</li><li class="part3">yellow</li><li class="part4">green</li>
  	</ul>
  </div>
  

  图示：
  
  缺点： 不难看出这样写代码是不行滴，影响美观，所以少用或不用

  方法二：
  我们要知道根源问题，那就是因为浏览器解析我们DOM结构时将换行解释为空格符，而且空格占一个字符的宽度，那我们索性就将<ul>内的字符尺寸直接设为0，那也是可以解决问题的：

  .box ul{font-size:0px;}
  

  图示：
  
  缺点： 虽然li标签没有了空隙，但是li如果是写有内容的话，就看不见了，当然可以再给li设置回字符font-size的尺寸，但还是有一个问题，在Safari浏览器仍然会有空隙的存在，所以这个方法并不是最完美的；

  方法三：
  使用float浮动也是可以去掉之间的空白间隙

  .box li {
      float: left;
      width:25%; 
      height: 150px;
      display:inline-block;
  }
  

  图示：
  
  缺点： 注意了使用float浮动时，如果没有进行清除浮动的话，不仅会出现高度坍塌，而且还会影响其他元素的布局，还有一点利用浮动这种去空隙的方法在轮播焦点图中也是不适用的，因此总结下来，这种方法还是有一定的局限性；

  方法四（最完美的方案）：
  我们也可以通过css字符间隔属性letter-spacing消除<li>中空格符间隙，其中空格的默认间隙为8px，那么我们可以这样写：

  .box ul{
  	letter-spacing: -8px;   // 去除ul内的字符间距
  }
  .box li {
       width:25%; 
       height: 150px;
       display: inline-block;
       letter-spacing: normal;  // 并且将Li标签的字符间隔设为正常
   }
  

  图示：
  目前这种方法在浏览器也无发现BUG，所以比较前三种方法这种方法目前是最好的，如果大佬们有什么好的方法或者文章有错误欢迎指正，小弟承蒙各位指点~