溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下img底部留白問題的如何解決，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
有時候，我們并未給圖片（img標簽）設置margin屬性中的margin-bottom值，在有一些瀏覽器里也會出現底部留白。下面，就介紹幾種方法來解決這個問題。
1、把圖片設為塊級元素
如：img{display:block;}
2、設置圖片的垂直對齊方式
如：img{vertical-align:top;}(vartical-align的值可選，text-top，bottom，text-bottom等，視情況而定。)
3、設置父對象的文字大小為0px
如：img 的父對象是 imgClass ，那么只需給 imgClass 加上一個屬性 font-size:0px 即可。但是這個會使父對象里的文字無法正常顯示。就算文字部分被子對像括起來，設置子對像文字大小依然可以顯示，但在CSS效驗的時候會提示文字過小的錯誤。
4、改變父對象的屬性
如果父對象的高寬固定，圖片大小隨父對象而定，則可以設置父對象：overflow:hidden;
5、設置圖片的浮動屬性
如：img{float:left;}
6、取消圖片標簽和其父對象的最后一個結束標簽間的空格
這個實現起來有些困難，我們往往會為了使頁面代碼層次清晰而加上一些空白縮進。
總的來說，如果不需要實現圖片混排的話，用方法1）比較好一點，方法2）也不錯；如果要圖文混排，用方法5）會好一些，但要記得清除浮動。當然到底用哪種方法，還是視具體情況和各人喜好來定吧。
以上是img底部留白問題的如何解決的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
