html – DIV中列表项和神秘间距之间的差距

请在此处查看我的codepen： http://codepen.io/Chiz/pen/XKBbok

1)如何摆脱红色盒子之间的小差距？我已经将填充和边距设置为0,但仍然存在差距.

2)在紫色框(.container)中,右侧的空间大于左侧的空间.我试图使用“margin：0 auto”将UL集中在.container中.但它没有效果.

TKS！

* {
  Box-sizing: border-Box;
}

.container
{
  border:1px solid blue;
  width:65%;
  margin:0 auto;
}

ul {
  list-style-type: none;
  border:1px solid purple;
  margin:0 auto;
}

ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: 0;
  padding: 0;
  position:relative;
}

ul li div
{
  border:1px solid green;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  right:0;
}

<div class="container">
  <ul>
    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Home
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Plants
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Land
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Animals
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />About
      </div>
    </li>
  </ul>
</div>

解决方法

1)内联块元素像文本一样显示内联,因此元素之间的任何空格都会产生间隙.删除< li>之间的空格结束和开始标记,即< / li>< li>

2)作为< li>元素是内联块,你需要改变你的保证金：0 auto;到文本对齐：中心;