img 图片排列出现空白解决办法

在制作网页时，有时为了方便会直接用图片排列，

但会出现两张图片之间有空隙的情况，

检查之后是没有margin 和 border 的

首先要知道产生这部分空白区域的原理。
图片的display属性默认是inline（我学习的时候是这样说的，不知道有没有上了堂假课），而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。

解决方法：

方法1：

img { display: block;
}
把img变成块状元素，所以是否需要留白，可以用过padding来设置。

方法2：

img { vertical-align: middle;
}
既然分析到img的vertical-align默认属性导致出现留白问题，所以直接修改vertical-align属性值就行咯。

方法3：

img { margin-bottom: -4px;

}
把img元素的底部外边距改成负值，同样可以实现去留白的效果。
这里修改的值的大小，会影响整个页面的布局。
修改的足够小（比如-100px），图片的留白部分就会消失，但是img之后的元素会被动上移，且会藏在img标签的下面。甚至一不小心就很容易把img后面的内容网上移得太多，导致内容显示不全。