盒子含图片多出几像素高度的问题
作者：互联网
问题
当一个盒子中含有一张图片，即使这个盒子(不管是块级元素还是行内块)没有设置高度，也会被内容撑起来等于图片的高度，但是事实并非如此。盒子的高度不等于图片的高度，而是多出了几像素，而这种问题出现在，html5、xhtml1.0 strict、xhtml1.1、html4.01 strict中。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
background-color:pink;
}
</style>
</head>
<body>
<div class="box1">
<img src="../images/3.jpg" alt="">
</div>
</body>
</html>
展示
解决方法
1、img标签添加属性
img{
vertical-align: top;
}
2、img的父标签添加
font-size:0;
3、img是inline-block元素转成block元素
img{
display:block;
}
当然还有给父元素设置行高为0也可以解决。
产生原因
标签：盒子,img,元素,高度,像素,多出,block 来源： https://blog.csdn.net/Speed_Pig/article/details/88366786