作为一名开发人员，在日常开发工作中经常会遇到由多张图片组成的页面，虽然设置了元素间的margin值padding值都为零，但是依然会看到两张图片间会有丑陋的空隙间距，无法做到无缝拼接。
所以简单的查了查发现造成这种现象的原因是因为img是内联元素，而内联元素的特性是“行布局”形式，意思也就是内联元素默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是撑开高度确实整体的高度，包含baseline到bottom的部分，所以就会造成有这一部分空隙。
那么针对这种情况也有对应的几种解决方法：
1.设置元素display：block
既然元素默认对齐方式是以baseline对齐的，那么通过改变vertical-align的值来改变元素的对齐方式那就不会有问题了
所以简单的查了查发现造成这种现象的原因是因为img是内联元素，而内联元素的特性是“行布局”形式，意思也就是内联元素默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是撑开高度确实整体的高度，包含baseline到bottom的部分，所以就会造成有这一部分空隙。
那么针对这种情况也有对应的几种解决方法：
1.设置元素display：block
其实这种方法的主要实现原理就是把愿意来的内联元素变成块级元素，既然你内联元素有这种特性，那我就把你变成块级元素，不存在这种特性那自然就不会有问题了
这种方法实现的原理主要是使元素脱离正常文档流，那么就不会受这种baseline对齐的影响了
其实基线的位置是与字体相关的，不同的 font-size会影响到这个空隙的大小。父级的font-size设置为零，那么元素也没办法以父级的基线为对齐标准了
既然元素默认对齐方式是以baseline对齐的，那么通过改变vertical-align的值来改变元素的对齐方式那就不会有问题了
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
