图片下间隙要怎么处理

最新推荐文章于 2023-02-27 09:40:55 发布

空白

最新推荐文章于 2023-02-27 09:40:55 发布

阅读量258

点赞数

分类专栏： CSS 学习文章标签： css

本文链接：https://blog.csdn.net/qq_38496329/article/details/107760042

版权

学习同时被 2 个专栏收录

105 篇文章 2 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

图片下间隙

<!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>

空白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片下间隙要怎么处理

图片下间隙<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <img src="../images/l1.jpg" alt="">gjiaz </div></
复制链接

扫一扫