溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML怎么解決img標(biāo)簽下面的小空隙

發(fā)布時(shí)間：2022-03-23 11:13:19 來(lái)源：億速云 閱讀：453 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“HTML怎么解決img標(biāo)簽下面的小空隙”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“HTML怎么解決img標(biāo)簽下面的小空隙”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

　　代碼：

　　<!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的標(biāo)簽元素，在結(jié)束的時(shí)候，會(huì)在末尾加上一個(gè)空白符（匿名文本），導(dǎo)致下方會(huì)多出來(lái) 3px 間距，其實(shí)我們?cè)趇mg右側(cè)添加一個(gè)span包裹住文本，現(xiàn)象會(huì)更明顯

　　有五個(gè)辦法可以解決以上問(wèn)題

　　第一種方法：

　　給div設(shè)置和img一樣的高度；

　　缺點(diǎn)：該方法不夠靈活，一旦img尺寸改變，我們要重新設(shè)置div的高度

　　第二種方法：

　　給img設(shè)置vertical-align為除baseline以外的值，常用

　　第三種方法：

　　給img添加display:block;

　　這個(gè)方法是我們比較常用，但需要注意，img一旦設(shè)置為塊，text-align:center；就不再生效，圖片的水平居中應(yīng)使用margin:auto;

　　第四種方法：

　　給img設(shè)置浮動(dòng)

　　設(shè)置浮動(dòng)會(huì)讓img脫離文檔流

　　缺點(diǎn)：父元素高度不會(huì)被img自動(dòng)撐開(kāi)

　　第五種方法：

　　給div設(shè)置font-size:0;

　　缺點(diǎn)：該方法會(huì)使div中的文字消失

讀到這里，這篇“HTML怎么解決img標(biāo)簽下面的小空隙”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手