作为开发人员，我们在日常开发工作中经常会遇到由多个图片组成的页面。虽然元素之间的填充值设置为零，但我们仍然可以看到两张图片之间会有一个难看的间隙，无法无缝拼接。
因此，简单的检查就可以看出，造成这种现象的原因是img是一个内联元素，而内联元素的特点是“行布局”，这意味着内联元素的默认对齐方式是与其父基线对齐，但开口高度确实是整体高度，包括从基线到底部的部分，所以会造成这种间隙。
那么针对这种情况也有对应的几种解决方法：
1.设置元素display：block
其实这种方法的主要实现原理就是把愿意来的内联元素变成块级元素，既然你内联元素有这种特性，那我就把你变成块级元素，不存在这种特性那自然就不会有问题了
2.设置元素float
这种方法实现的原理主要是使元素脱离正常文档流，那么就不会受这种baseline对齐的影响了
3.设置父级元素font-size：0
其实基线的位置是与字体相关的，不同的 font-size会影响到这个空隙的大小。父级的font-size设置为零，那么元素也没办法以父级的基线为对齐标准了
4.改变vertical-align的值
既然元素默认对齐方式是以baseline对齐的，那么通过改变vertical-align的值来改变元素的对齐方式那就不会有问题了
免责声明：玩转网作为开放的信息发布平台，所有资讯仅代表作者个人观点，与玩转网无关。如文章出现侵权、违规及其他不当言论，请联系微信：pi1881
风险提示：本站所提供的资讯不代表任何投资暗示。投资有风险，入市须谨慎。
山高不厌攀，水深不厌潜，学精不厌苦，只有努力才能赢得最后的成功！
© 版权声明
名称：玩转网
微信 : pi1881 👏
本站部分内容来源于网络，仅供大家学习与参考，如有侵权 请联系我们进行删除处理
THE END
感觉文章不错，分享给身边的朋友吧！
