1.两个img标签产生空隙的原因
img标签本身是个行内元素,当多个img标签排在一起时,它们之间如果有回车换行或者空格就会形成空隙。
其实如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是你对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙。
2.解决办法
(1)消除上下间隙
1、改变其垂直对齐方式–将其改变为block元素,但是该方法直接改变了img行内块的性质。
img{ display:block};
2、改变其垂直对齐方式
img{vertical-align:top;}
3、将最外层行高设为0
div{ line-height:0 };
(2)消除左右间隙
4、多个标签写在一行,不可有空格或者回车
<img src="..." style="..."><img src="..." style="...">
5、使用letter-spacing属性
<div style="letter-spacing:-800px">
<img src="..." style="...">
<img src="..." style="...">
</div>
6、使用float进行浮动
img{float: left;}