img底部空白间隙的问题
先看代码:
<!DOCTYPE html>
<html lang="zhCn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: green;
}
</style>
</head>
<body>
<div>
<img src="./女.PNG" alt="">
</div>
</body>
</html>
我们可以看到图片和div之间有缝隙,这是因为img元素默认样式导致,因为行内元素默认的垂直对齐方式:基准线baseline
如果没有字,img就不需要对基准线,但是我们即使没有输出文字,也会默认按照有文字的方式去处理。
解决方案
方案一:
既然img默认是对准基线,那我们就更改img的基线的位置,让img的基线对准bottom/top
即可。
img {
vertical-align: bottom/top;
}
方案二:
我们让img的父容器里面字母烟消云散
div {
background-color: green;
// 字体大小为0
font-size: 0;
}
或者
div {
background-color: green;
// 行高为0
line-height: 0;
}
方案三:
将img设置成块元素
img {
display: block;
}
或者
div {
background-color: green;
overflow: hidden;
}
img {
// 会影响布局
float: left/right;
}
或者,给img父盒子设置成弹性盒子
div {
background-color: green;
display: flex;
}