css如何解決圖片底部空白縫隙問題

問題描述：

引用圖片時下方總是會出現空白，情況如下圖所示。

css程式碼：

<style>
    .img-box {
        border: 2px solid red;
        width: 550px;
    }
</style>
<div class="img-box">
    <img src="./img.png" alt="">
</div>

原因分析：

行內區塊元素會和文字的基線對齊。

（推薦教學：CSS教學）

解決方法：

1、新增 vertical-align: middle | top | bottom 等。 （建議使用）

img {
    vertical-align: bottom;
}

2、把圖片轉換成區塊級元素display: block;（轉換區塊級元素可能會影響你的佈局，所以建議使用第一種）

g {
    display: block;
}

相關影片教學推薦：css影片教學

以上是css如何解決圖片底部空白縫隙問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！