技術標籤：壯哉我大前端csshtml

三種方法去除img標籤自帶外邊距

• • • 方法一：給img標籤加“display: block”
    • 方法二：給img標籤的父容器指定高度
    • 方法三：將img標籤父容器的font-size設定為0，其他子元素的字號另外設定
    • 寫在最後

<div id="img">
    <img src="./img.jpg" alt="" srcset="">
</div>
<div id="bottom"></div>
 


<style>
    #img img{
        height: 100px;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

頁面效果：

圖1-img的高度是100px

圖2-父容器div的高度卻是104px

第一個div中包裹img標籤，img標籤的高度設定為100px，但是第一個div的高度卻是104px。上面圖1中可以看到兩個div之間出現了一條“白邊”，這個邊距並不是我們設定的，而不同瀏覽器解析出來的這條“白邊”的距離可能是不相同的，這就非常地影響我們佈局。在實際佈局中經常會遇到這個問題，該如何解決呢？這裡給出三種方法來去除img標籤自帶的這條“白邊”。

方法一：給img標籤加“display: block”

只需要給img標籤加上“display: block”即可，程式碼和頁面效果如下：

<style>
    #img img{
        height: 100px;
        display: block;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

頁面效果：

圖3-兩個div之間的“白邊”不見了

可以看到，兩個div之間的“白邊”不見了。

方法二：給img標籤的父容器指定高度

手動給img標籤的父容器指定高度，這裡將其高度設定為100px，和img標籤相同，同樣可以去除兩個div之間的“白邊”。

<style>
    #img{
        height: 100px;
    }
    #img img{
        height: 100px;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

頁面效果如上面圖3。

方法三：將img標籤父容器的font-size設定為0，其他子元素的字號另外設定

將img標籤父容器的font-size屬性設定為0，如果父容器內有其他子元素需要設定字號可以另外設定，這樣同樣可以去除div父容器內img標籤底部的那條“白邊”。
這一方法也可以解決兩個inline-block元素之間出現空白間距的問題。

<style>
    #img{
        font-size: 0;
    }
    #img img{
        height: 100px;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

頁面效果如上面圖3。

寫在最後

以上為全部內容，感謝閱讀。
本博文僅為學習記錄和分享交流，如有錯漏，還請幫忙指出，也歡迎更多補充，不勝感激。

GitHub地址：https://github.com/ljxlijiaxin.