运维系列&前端系列：两个img之间为什么会有空隙及解决方法

两个img之间为什么会有空隙及解决方法

img标签本身是个行内元素，当多个img标签排在一起时，它们之间如果有回车换行或者空格就会形成空隙。

其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙。

1、改变其垂直对齐方式–将其改变为block元素，但是该方法直接改变了img行内块的性质。

img{ display:block};

2、改变其垂直对齐方式

img{vertical-align:top;}

3、将最外层行高设为0

div{ line-height:0 };

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;}