阅读 2200

CSS解决img空白缝隙问题...

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

# html

<div>
    <img src="01.png">
    <img src="01.png">
</div>

#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变成块级元素,其他三种还保持内联元素.



文章分类
前端
文章标签