解决img标签之间的间距

为什么img标签上下会有间距：

块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离（这个距离和font-size有关，font-size越大距离越大），所以不同div之间有间距，这是因为图片与父元素的底边有距离（这个距离是父元素的baseline到父元素的底部的距离）。

分析：

如图所示，将图片的宽高都设置为200px，图片到父元素的底部有距离，并且父元素div被这个距离挤压导致高度增加

// 结构
<div>
    <img src="./jd2.jpg" alt="" />
    <img src="./jd1.jpg" alt="" />
</div>

// 样式
img {
    width: 200px;
    height: 200px;
}
div {
    border: 1px solid #000;
}

 改变父元素font-size的大小，距离变大

div {
    border: 1px solid #000;
    font-size: 60px;    // 设置父元素div的字体大小
}

当有两个div的时候，这两个div之间就会有一定的距离

解决方法：

垂直方向的间距：

1、将图片转换为块级对象
   因为存在间距的主要问题出现在行内块元素上，即设置img为：display：block；

2、设置图片的垂直对齐方式，消除对齐方式的影响
   即设置图片的 vertical-align 属性为 top | middle | bottom 也可以解决。
   img {vertical-align:top;}

3、设置父元素的文字大小为0px
   即，在父元素中添加一行： font-size:0;

水平方向的间距：

1、设置父元素的文字大小为0px
   即，在父元素中添加一行： font-size:0;

2、设置float
   给图片设置float: left;

3、使用负值margin消除间距