img下面的留白解决

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

“留白”出现的原因

 　　　行内元素默认是和父级元素的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>

 

posted @ 2017-04-27 11:33  杨新权  阅读(1259)  评论(0)  编辑  收藏  举报