html图片中间有细缝,CSS解决img空白缝隙问题...

img元素默认样式导致，因为行内元素默认的垂直对齐方式基准线baseline，使得字体下方会有空隙。

# html

#css

div {

border: 1px solid #ccc;

width: 200px;

}复制代码

1. 给定div边框border: 1px solid #ccc;后如图，两张图片之间有3px空隙，图片下方也将div撑出3px空隙：

2. 给div固定宽度width: 200px;后如下图

解决空隙

方法1：将img设置为块元素(缺点是改变了img元素类型, 会改变布局, img换行)

img { display: block;}

方法2：设置父元素div的line-height: 0； (需设置父元素宽度让图片垂直排列,父元素不定宽img水平排列时无效)

div {

width: 200px;

height: 200px;

border: 1px solid #ccc;

line-height: 0;

}

复制代码

方法3: 设置img浮动 float: left; 或 float: right (影响布局)

img { float: left}

方法4：设置父元素font-size: 0; (父元素内部其他元素font-size需重新设置)

div {font-size: 0}

方法5：设置img对齐方式 vertical-align: bottom/top/middle; (需设置父元素宽度让图片垂直排列,父元素不定宽img水平排列时无效)

img {vertical-align: top;}

四种方法各有不同, 根据实际情况使用，display: block和float:left 会把img变成块级元素，其他三种还保持内联元素.