img下面的留白解决(留一点小缝隙)

在做网页的时候经常会出现一个令人困惑的现象。那就是行内元素和块级元素之间会出现“留白”。就是块级元素中明明只有一个行内元素,但行内元素却不会铺满块级元素。像这个例子:
img下面的留白解决(留一点小缝隙)_第1张图片
“留白”出现的原因
  行内元素默认是和父级元素的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>

你可能感兴趣的:(前端)