css img 适配尺寸_如何解决img标签下面的小空隙（附详细视频教程）
生活随笔
收集整理的這篇文章主要介紹了
css img 适配尺寸_如何解决img标签下面的小空隙（附详细视频教程）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很多初學小伙伴留言說在寫頁面的時候碰到過這樣的問題，用一個div直接包裹img時，img的下方會出現3px間距，像這樣：
那其實解決起來也很簡單的，剛接觸的伙伴，不清楚這點也很正常。
代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">.box {border: 2px solid red;}</style></head><body><div class="box"><img src="img/4.png"></div></body> </html>那原因是什么呢？
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中的文字消失根據實際情況選擇合適的方法；讓我的女神更完美！
2020Electron-HTML+CSS+JS構建跨平臺桌面應用程序https://pan.baidu.com/s/1CQoJj0AjRvqM97gXVWPKtw
Web前端從入門到精通（HTML+CSS全套）https://pan.baidu.com/s/1IaO6LN3L7QEqrs78vvRuYg
整理的前端視頻教程，初學的伙伴，或者想提升的伙伴，可以留言！
總結
以上是生活随笔為你收集整理的css img 适配尺寸_如何解决img标签下面的小空隙（附详细视频教程）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 盛语小智教育机器人是骗人的_武清区人民检
- 下一篇： arcscene如何显示标注_CAD制图