這篇文章主要介紹如何解決HTML+CSS布局img圖片元素出現空白的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
即，設置img為：
display:block;在本例中添加一組CSS代碼：
#nav img {vertical-align:top;}即設置圖片的 vertical-align 屬性為“top，text-top，bottom，text-bottom”也可以解決。如本例中增加一組CSS代碼：
#nav img {vertical-align:top;}即，在#nav 中添加一行：
font-size:0;可以解決問題。但這也引發了新的問題，在父對象中的文字都無法顯示。就算文字部分被子對象括起來，設置子對象文字大小依然可以顯示，但在 CSS 效驗的時候會提示文字過小的錯誤。
4、改變父對象的屬性
如果父對象的寬、高固定，圖片大小隨父對象而定，那么可以設置：
overflow:hidden;來解決。如本例中可以向 #sub 中添加以下代碼：
width:88px;height:31px;overflow:hidden;即在本例中增加一行 CSS 代碼：
#nav img {float:left;}如果要實現圖文混排，這種方法是很好的選擇。
比如：
<img src="http://www.dadijd.cn/" /><div >網頁設計</div>修正為：<img src="http://www.dadijd.cn/" />
<div >網頁設計</div>以上是“如何解決HTML+CSS布局img圖片元素出現空白的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
