inline-block间隔问题

常见的inblock-block元素：

、、

产生原因：

在HTML代码里，空格也会占位
效果如下图所示（图片之间会有4px左右的空隙）：

解决办法：

1.去除标签之间的空格和回车；

效果如下图所示：

2.使用margin负值

     .wrap img{
            width: 300px;
            height: 400px;
            margin-left: -5px;
        }

效果如下图所示：

3.给父元素添加font-size: 0

  .wrap{
            width: 1000px;
            height: 400px;
            margin: 0 auto;
            font-size: 0;
        }

效果如下图所示：

4.添加浮动

 .wrap img{
            float: left;
            width: 300px;
            height: 400px;
        }

效果如下图所示：