解決Img圖片底部空白縫隙問題

  發布時間:2020-01-09 16:09:25   作者:麥栗   我要評論
這篇文章主要介紹了解決Img圖片底部空白縫隙問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

最近做項目發現引用圖片時下方總出現空白,情況如下圖所示。

<style>
    .img-box {
        border: 2px solid red;
        width: 550px;
    }
</style>

<div class="img-box">
    <img src="./img.png" alt="">
</div>

后發現原因是行內塊元素會和文字的基線對齊,要解決這個問題其實很簡單,主要方法有兩種:

1. 給圖片添加 vertical-align: middle | top | bottom 等。(推薦使用)

img {
    vertical-align: bottom;
}

2. 把圖片轉換為塊級元素 display: block; (轉換塊級元素可能會影響你的布局,所以推薦使用第一種)

g {
    display: block;
}

好啦,問題就這么簡單的解決了。
如果大家有什么更好的方法,歡迎交流,評論區留言哦~

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • CSS網頁響應式布局實現自動適配Pc/Pad/Phone設備

    這篇文章主要介紹了CSS網頁響應式布局實現自動適配Pc/Pad/Phone設備,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著
    2020-02-17
  • css中有序無序列表項list樣式設置方法

    這篇文章主要介紹了css中有序無序列表項list樣式設置方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-17
  • 純CSS實現鼠標放上滑動出半透明效果的文字說明(新手小白 必看)

    這篇文章主要介紹了 純CSS實現鼠標放上滑動出半透明效果的文字說明(新手小白 必看),代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-17
  • css選擇器四大類:基本、組合、屬性、偽類

    這篇文章主要介紹了css選擇器四大類:基本、組合、屬性、偽類的相關知識,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-14
  • 在Firefox瀏覽器中利用CSS竊取數據

    這篇文章主要介紹了在Firefox瀏覽器中利用CSS的一種數據竊取技術,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-14
  • css定位position引發的層級關系問題詳解

    這篇文章主要介紹了css定位position引發的層級關系問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2020-02-10
  • css中overflow:hidden失效問題的解決方法

    這篇文章主要介紹了css中overflow:hidden失效問題的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2020-02-10
  • CSS 實現鼠標放在上面時整行變色效果

    這篇文章主要介紹了CSS 實現鼠標放在上面時整行變色效果,本文給大家分享實現思路,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-10
  • 純CSS實現隱藏滾動條但仍具有滾動的效果(移動端和pc端)

    這篇文章主要介紹了純CSS實現隱藏滾動條但仍具有滾動的效果(移動端和pc端),本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-07
  • css實現3d立體魔方的示例代碼

    這篇文章主要介紹了css實現3d立體魔方的示例代碼的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2020-02-06

最新評論

pc蛋蛋幸运28app下载地址