现象：

inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距

方法一：移除空格

  1. //换行
  2. <div class="space">
  3.     <a href="##">
  4.     惆怅</a><a href="##">
  5.     淡定</a><a href="##">
  6.     热血</a>
  7. </div>
  11. //换行
  12. <div class="space">
  13.     <a href="##">惆怅</a
  14.     ><a href="##">淡定</a
  15.     ><a href="##">热血</a>
  16. </div>
  21. //使用注释
  22. <div class="space">
  23.     <a href="##">惆怅</a><!--
  24.     --><a href="##">淡定</a><!--
  25.     --><a href="##">热血</a>
  26. </div>

方法二：margin负值

  1. .space a {
  2.     display: inline-block;
  3.     margin-right: -3px;
  4. }

方法三：无闭合标签去除inline-block元素间距

  1. <div class="space">
  2.     <a href="##">惆怅
  3.     <a href="##">淡定
  4.     <a href="##">热血
  5. </div>

方法四：使用font-size:0

  1. .space {
  2.     font-size: 0;
  3.     -webkit-text-size-adjust:none; <!--兼容chrome-->
  4. }
  5. .space a {
  6.     font-size: 12px;
  7. }

方法五：使用letter-spacing（字符间距）

  1. .space {
  2.     letter-spacing: -3px;
  3. }
  4. .space a {
  5.     letter-spacing: 0;
  6. }

方法六：使用word-spacing（单词间距）

  1. .space {
  2.     word-spacing: -6px;
  3.     display: inline-table; //兼容chrome
  4. }
  5. .space a {
  6.     word-spacing: 0;
  7. }