img下面的留白解决

时间 2019-12-07

标签 img 下面留白解决栏目 HTML 繁體版

原文原文链接

在作网页的时候常常会出现一个使人困惑的现象。那就是行内元素和块级元素之间会出现“留白”。就是块级元素中明明只有一个行内元素，但行内元素却不会铺满块级元素。像这个例子：html

“留白”出现的缘由

　　　行内元素默认是和父级元素的baseline对齐的，而不是父级元素的bottom。baseline有时候和父级元素bottom有一段距离。字体

解决办法一：spa

　　设置vertical-align:bottom;code

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

解决办法二：htm

　　定义img的父容器的字体大小为0；blog

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

解决办法三：图片

　　把图片设置为块级元素；it

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

解决办法四：class

　　给父级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>