li和a之间的微小的几像素差距解决办法？

Question

页面html结构:

<div class="J_Poster poster-main">
    <div class="poster-btn poster-prev-btn"> </div>
    <ul class="poster-list">
      <li class="poster-item"><a href="#"><img src="img/3.jpg" width="100%"></a></li>
      <li class="poster-item"><a href="#"><img src="img/4.jpg" width="100%"></a></li>
      <li class="poster-item"><a href="#"><img src="img/5.jpg" width="100%"></a></li>
    </ul>
     <div class="poster-btn poster-next-btn"> </div>
  </div>

css:

.poster-main {
    width: 800px;
    height: 200px;
    position: relative;
    margin: 50px 50px;
}
.poster-main .poster-list {
    width: 800px;
    height: 270px;
}
.poster-main .poster-list .poster-item{
    position: absolute;
    left: 0;
    top: 0
}
/*清除底部的5像素偏差 */
.poster-main a,.poster-main img {
    display: block;   //问题：为什么设置为block??
}
.poster-main .poster-btn {
    width: 100px;
    height: 270px;
    position: absolute;
    top: 0;
    z-index: 10;
    cursor: pointer;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.poster-main .poster-prev-btn {
    left: 0;
    background:  url(../img/btn_l.png) no-repeat center center;
}
.poster-main .poster-next-btn {
    right: 0;
    background:  url(../img/btn_r.png) no-repeat center center;
}

问题截图：

在li和a之间生成的微小的像素差距，在li和a设置为block时，差距就消失了，请问下这是什么原因？

Answer 1

设置a为display: block就可以了，a是一个行内元素，默认高度等于默认字体大小高度。

Answer 2

元素间留白间距出现的原因就是标签段之间的空格
解决：1.写成一行
2.借用注释<!--

--><a href="##">

3.使用margin负值
4.font-size:0
5、利用 word-spacing 和 letter-spacing

Answer 3

解决方法有很多

移除空格
使用 margin 负值
使用 font-size: 0
使用 letter-spacing
使用 word-spacing
我觉得使用 font-size: 0 比较好，对别的元素影响最小 在 a 的外层将字体尺寸设为 0，载对内层的 a 重新设置字体大小，即可。