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

垂直方向

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

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

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

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

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

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

其中有关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;/* 设置图片垂直对齐方式 */
    }

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

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

水平方向

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

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

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

解决方法:

  1. 元素之间不添加空格和换行字符,即连写
    
    	CSS图片间隙问题——原因分析及解决方法CSS图片间隙问题——原因分析及解决方法CSS图片间隙问题——原因分析及解决方法
    
  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; /* 设置图片浮动属性 */
    }

上一篇:24.Redis实现全局唯一ID
下一篇:SEO网站优化步骤和技巧