解决图片底部白边
当图片的父元素是一个块盒，且父元素高度自动即没有指定值，图片底部和父元素底边之间往往会出现空白。例：
<style>
.contain {
border: 1px solid black;
width:301px;
}
img {
width: 300px;
height: 300px;
}
</style>
<body>
<div class="contain">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F4%2F22%2Ffc5d1297286.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667473019&t=e32b81e0df453a6590cebe1880f57565"
alt="">
</div>
</body>效果如下 ：
我们可以明显的看到图片与边框存在一个白边，那么我们要如何解决这个白边呢？解决方法有两种
- 将父元素的字体大小设置为0。
- 将图片设置为块盒，也就是设置图片的display值为block。
下面我们将上述例子的父元素的字体大小设置为0
<style>
.contain {
border: 1px solid black;
width:301px;
font-size:0;
}
img {
width: 300px;
height: 300px;
}
</style>
<body>
<div class="contain">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F4%2F22%2Ffc5d1297286.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667473019&t=e32b81e0df453a6590cebe1880f57565"
alt="">
</div>
</body>
可以看到底部的白边消失了。
下面我在来设置图片的display属性为block
<style>
.contain {
border: 1px solid black;
width:301px;
}
img {
width: 300px;
height: 300px;
display:block;
}
</style>
<body>
<div class="contain">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F4%2F22%2Ffc5d1297286.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667473019&t=e32b81e0df453a6590cebe1880f57565"
alt="">
</div>
</body>
底部白边同样也消失了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。