作者:as2520_526 | 来源:互联网 | 2023-07-15 20:59
遇到过好几次这个问题,但总是解决之后下次就忘了,这次记录下来。。。
因为img是行内元素,所以他的vertical-align的默认值是baseline,所以他的对齐方式导致了下白边产生。
针对img的这个属性可以有两种解决办法:
1.把img变为块级元素
img {display:block;
}
2.更改img的对齐方式
img {vertical-align: middle;
}
或者 还有些小方法
3.更改父元素的字体大小
因为是img与文字的默认对齐方式导致的,所以父元素字体大小为0时,就不会有这个问题了。
但设置前要确定父盒子里不会有文字哦,不然文字就无法显示了。
给img的父盒子加 { font-size:0 }
4.设置父元素行高为0
同上
给img的父盒子加 { line-height: 0 }
5.调整img的margin-bottom
根据自己的需要调整图片的外边距,为负值时就可以隐藏白边,但不推荐,容易影响后面的元素。
img {margin-bottom: -4px;
}