Web前端技術分享：img標籤下方出現空隙的問題解決方案

很多初學小夥伴在寫頁面的時候碰到過一個問題，當我們用一個div直接包裹img，img的下方會出現3px間距，如圖

程式碼如下：

為什麼會出現這種情況呢？

因為img是一種類似text的標籤元素，在結束的時候，會在末尾加上一個空白符（匿名文字），導致下方會多出來 3px 間距，其實我們在img右側新增一個span包裹住文字，現象會更明顯。

下面我們來解決這個問題

第一種方法：

• 給div設定和img一樣的高度；
• 缺點：該方法不夠靈活，一旦img尺寸改變，我們要重新設定div的高度

第二種方法：

• 給img設定vertical-align為除baseline以外的值，常用

第三種方法：

• 給img新增display:block;
• 這個方法是我們比較常用，但需要注意，img一旦設定為塊，text-align:center；就不再生效，圖片的水平居中應使用margin:auto;

第四種方法：

• 給img設定浮動，設定浮動會讓img脫離文件流
• 缺點：父元素高度不會被img自動撐開

第五種方法：

• 給div設定font-size:0;
• 缺點：該方法會使div中的文字消失

上述五種方式同學們根據實際情況選擇使用即可，最後效果如圖所示

歡迎小夥伴們轉發分享，想了解更多web前端知識，可以關注我喲！