img图片间距问题

vertical-align

这个属性用来设置标签垂直的对齐方式

• baseline 默认值 标签放置在父标签的基线上

• top 把标签的顶端和行中最高的标签的顶端对齐

• middle 把标签放在父标签的中部

• bottom 把标签的底端放在行中最低的标签的低端对齐

原因

1.img本来是行内元素，却可以用width 和height,当父元素没有设置高度的时候，用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。

2.img图片默认排版为 inline-block;而所有的inline-block元素之间都会有空白。

解决方案

1. 给父元素设置font-size

body{
font-size:0;
}

2. 把图片设置为块元素

img{
display:block;
}

3. 给图片设置垂直对齐方式

img{
//除了默认值其他都可以
vertical-align：middle；
}