CSS图片间隙问题——原因分析及解决方法

垂直方向

现象一：在div中插入图片时，图片和外部div块之间垂直方向出现间隙，如下图所示：

现象二：多张图片垂直排列显示，如下图所示：

原因分析：img是内联元素，其默认垂直对齐方式为基线对齐，即vertical-align:baseline，即图片的下边缘与第一行英文文本的下边缘（基线）对齐，而块状元素div不存在基线，具体如下图所示：

其中有关CSS盒子基线的相关知识，可以参考以下链接：

CSS基线对齐的理解以及处理

解决方法：

1. 把img转换为块级元素

   img{
   	width: 100px; /* 设置图片大小方便显示 */
   	display: block; /* 设置图片为块级元素 */
   }

2. 设置父元素文本大小为0（父元素无文本的条件下使用）

   .demo{
       background-color: blue;
   	font-size: 0; /* 设置父元素文本大小为0 */
   }

3. 父元素向下调整行高，使基线上移，直至与图片之间无空隙（具体范围因父元素文本大小而异，可以直接设置为最小值0）

   .demo{
   	background-color: blue;
   	line-height: 0; /* 设置父元素行高为0 */
   }

4. 设置img垂直对齐方式

   img{
       width: 100px; /* 设置图片大小方便显示 */
       vertical-align: top;/* 设置图片垂直对齐方式 */
   }

   

5. 设置img的浮动方式

   .demo{
   	background-color: blue;
   	overflow: hidden; /* 解决BFC环境高度坍塌问题*/
   	zoom: 1; /* 兼容性优化，解决低版本IE中overflow无效的问题 */
   }
   img{
   	width: 100px; /* 设置图片大小方便显示 */
   	float: left; /* 设置图片浮动属性 */
   }

水平方向

现象一：多张图片水平方向排列显示，如下图所示：

原因分析：空格和换行字符被浏览器解析为空格

解决方法：

1. 元素之间不添加空格和换行字符，即连写

   <div class="demo">
   	<img src="img/20180824170128_eiuif.jpg" /><img src="img/20180824170128_eiuif.jpg" /><img src="img/20180824170128_eiuif.jpg" />
   </div>

2. 设置父元素文本大小为0（父元素无文本的条件下使用）

   .demo{
       background-color: blue;
   	font-size: 0; /* 设置父元素文本大小为0 */
   }

3. 设置img的浮动方式

   .demo{
   	background-color: blue;
   	overflow: hidden; /* 解决BFC环境高度坍塌问题*/
   	zoom: 1; /* 兼容性优化，解决低版本IE中overflow无效的问题 */
   }
   img{
   	width: 100px; /* 设置图片大小方便显示 */
   	float: left; /* 设置图片浮动属性 */
   }