img下面的留白解决（留一点小缝隙）

最新推荐文章于 2024-04-30 11:03:18 发布

mingjuna2010

最新推荐文章于 2024-04-30 11:03:18 发布

阅读量515

点赞数

分类专栏：前端

原文链接：https://www.cnblogs.com/yang0901/p/6773367.html

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在做网页的时候经常会出现一个令人困惑的现象。那就是行内元素和块级元素之间会出现“留白”。就是块级元素中明明只有一个行内元素，但行内元素却不会铺满块级元素。像这个例子：
在这里插入图片描述
“留白”出现的原因
　　行内元素默认是和父级元素的baseline对齐的，而不是父级元素的bottom。baseline有时候和父级元素bottom有一段距离。
解决办法一：
设置vertical-align:bottom;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}
            .box{border:1px solid red;}
            .box img{vertical-align: bottom;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                <img src="1.png" alt="" />
            </div>
        </div>
    </body>
</html>

解决办法二：
定义img的父容器的字体大小为0；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}
            .box{border:1px solid red;font-size:0px;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                <img src="1.png" alt="" />
            </div>
        </div>
    </body>
</html>

解决办法三：
把图片设置为块级元素；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}
            .box{border:1px solid red;}
            .box img{display: block;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                <img src="1.png" alt="" />
            </div>
        </div>
    </body>
</html>

解决办法四：
给父级div设定width,height.同时img设置width：100%；height:100%;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}
            .box{width:200px;height:200px;border:1px solid red;}
            .box img{width:100%;height:100%;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                <img src="1.png" alt="" />
            </div>
        </div>
    </body>
</html>