解决div和img之间的空隙

div盒子和img之间有空隙之前也遇到过几次这问题，今天又遇到了特地来总结下。

先上代码和效果图：

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{
           margin: 0;
           padding: 0
       }
       div{
           margin: 0 auto;
           max-width: 400px;
       }
       img{
           width: 100%;
       }
       .bb{
           height: 300px;
           background: red;
       }
   </style>
</head>
<body>
   <div class="b">
       <img src="./t.jpg" alt="">
   </div>
   <div class="bb"></div>
</body>
</html>

总结了下解决方法还不少：

1.将img设置为block;

这个基本可以解决img和div下方的缝隙问题。

2.设置img的竖直对齐方式

v-align:bottom;

3.设置父级div的font-size:0;

4.设置外层的div的line-height:0

在这里推荐第一种。

巴特西

解决div和img之间的空隙

最新文章

热门文章