溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“HTML怎么解決img標簽下面的小空隙”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML怎么解決img標簽下面的小空隙”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
代碼：
<!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中的文字消失
讀到這里，這篇“HTML怎么解決img標簽下面的小空隙”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
