图片下间隙问题

时间：2022-03-02 20:31:06

一、问题：一个盒子里包含一张图片，盒子不设大小，图片出现下间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片下间隙问题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="1.png" alt="">
    </div>
</body>
</html>

图片下间隙问题

二、解决办法

①设置父对象的文字大小为0px

        .box{
            border: 1px solid #000;
            font-size: 0;
        }

②将图片转换为块级对像

        .box img{
           display: block;
        }

③设置图片的垂直对齐方式（任选一种）

        .box img{
           /* display: block; */
           vertical-align: top;
           vertical-align: middle;
           vertical-align: baseline;
           vertical-align: text-bottom;
           vertical-align: text-top;
        }

④改变父对象的属性

   　　 .box{
            border: 1px solid #000;
            /* width: 500px; */
            height: 375px;
            overflow: hidden;
        }

⑤设置图片的浮动属性

        .box img{
           float: left;
        }
标签：

相关文章