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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。