img底部多出5px的间隙留白
问题描述
将img标签放在div中，在竖直方向上img不能填满，底部会多出5px的间隙留白；
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div2 {
border: 5px black solid;
}
img {
background-color: pink;
width: 160px;
height: 110px;
}
</style>
<body>
<div class="div2">
<img src="./d7a15df55e98e4163390096ed05b1ef5.png" alt="">
</div>
</body>
- img的高度为110px，其父元素div2高度为115px，凭空多出了5px；
问题原因
- 原因在于
行内块元素会和文字的基线baseline对齐；
解决方案(四种)
父元素字体大小设置为0
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div2 {
border: 5px black solid;
font-size: 0;
}
img {
background-color: pink;
width: 160px;
height: 110px;
}
</style>
将img元素设置为 display: block
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div2 {
border: 5px black solid;
font-size: 0;
}
img {
display: block;
background-color: pink;
width: 160px;
height: 110px;
}
</style>
将img元素的vertical-align设置为bottom
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div2 {
border: 5px black solid;
font-size: 0;
}
img {
display: block;
background-color: pink;
width: 160px;
height: 110px;
vertical-align: bottom;
}
</style>
父元素设置 line-height: 5px
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div2 {
line-height: 5px;
border: 5px black solid;
font-size: 0;
}
img {
display: block;
background-color: pink;
width: 160px;
height: 110px;
}
</style>
任选上述一种方案，可解决5px留白问题，视觉如下：
