图片下间隙

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div>
        <img src="../images/l1.jpg" alt="">gjiaz
    </div>
</body>

</html>

div的高：

图片的高：

因此可以发现图片存在一定的间隙

原因

分析图片产生下间隙的原因，通过将字体大小改变可以发现图片的下间隙变得更大，可以分析出下间隙与字体有关系

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div>
        <img src="../images/l1.jpg" alt="">
    </div>
</body>

</html>

解决方案1

因此可以采取解决方案，设置字体大小为0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-size: 0px;
        }
    </style>
</head>

<body>
    <div>
        <img src="../images/l1.jpg" alt="">
    </div>
</body>

</html>

解决方案2

行内元素在页面上都有一个基线对准的，可以通过调整图片的基线对齐方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        <img src="../images/l1.jpg" alt="">
    </div>
</body>

</html>

解决方案3

提到行内元素有基线对准方式，那么如果变成块元素就没有这一说法了，因此通过转换为块元素也可解决

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <img src="../images/l1.jpg" alt="">
    </div>
</body>

</html>