去除inline-block元素之间的间隙以及图片下有空隙

1. 去除行内块间隙

使用行内块元素时，会发现相邻的行内块元素不是紧紧挨在一起的，中间有一个缝隙，此时是可以去除这个缝隙的。

方法一 设置父元素font-size：0；在单独设置子元素的字体大小即可；父级font-size可以影响子元素行内块的间距

.father {
	font-size: 0;//可以去除缝隙
0}
.son {
	font-size: 16px;//设置一个你需要的大小
}

方法二 父元素使用letter-spacing：-6px; 子元素再设置回0即可

.father  {
        letter-spacing: -6px;//值小于等于-6px都可以，如-9px，-20px
      }
.son {
        letter-spacing: 0;
      }

方法三 父元素使用word-spacing：-6px;子元素再设置回0即可
使用方法和二一样，不在赘述

方法四 行内块元素设置左或右margin值 （不建议使用）

.son {
        margin-left: -6px;
      }

方法五 去掉HTML标签之间的换行和空格，会降低代码的可读性 （不建议）

    <div>
        <a href="#">链接1</a
        ><a href="#">链接2</a
        ><a href="#">链接3</a>
    </div>

2. 解决图片下空隙

图片为什么和父盒子的下边框有一个空隙呢，这是因为图片默认是和文字基线对齐


所以呢，改变图片对齐方式即可

img {
	vertical-align：middle；//改为top，bottom都可以
}

这样就欧啦，大功告成。！！！！！！！！！！！！！！！