成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

圖片在DIV中產(chǎn)生底部間隔的解決方法

2022-05-25    分類： 網(wǎng)站建設(shè)

默認情況下，容器中的圖片在容器底部會自動產(chǎn)生一個間隔距離。要想把這個距離清除掉，首先要明白這個距離的產(chǎn)生原理，也即是說為什么會產(chǎn)生這個距離。圖片作為內(nèi)聯(lián)元素，其默認的vertical-align屬性的取值為baseline，也就是基線對齊。這種垂直對齊方式是圖片的底部與文本的基線對齊。這就是產(chǎn)生這個小距離的根本原因。
產(chǎn)生的小距離是圖片與文本基線對齊后，文本基線下方的文字部分，也就是四線三格的第三格，即基線。

四線三格的第三格，即基線

既然知道了這個距離產(chǎn)生的原因，那么就容易處理了。


解決方案1：調(diào)整vertical-align屬性的取值：
既然這個距離是由圖片的vertical-align屬性的默認取值為baseline產(chǎn)生的，那么就可以調(diào)整該屬性的取值不再是baseline即可。
將圖片的vertical-align屬性設(shè)置為bottom、middle、top均可。實現(xiàn)代碼如下所示。

div img{vertical-align:middle;}


解決方案2：調(diào)整display屬性的取值：
我們知道，vertical-align屬性只適用于內(nèi)聯(lián)元素。那么只需要將圖片由內(nèi)聯(lián)元素改為塊級元素即可。
修改元素的狀態(tài)可以采用CSS技術(shù)中的display屬性。實現(xiàn)代碼如下所示。
div img{display:block;}

上述代碼將標(biāo)記變?yōu)榱艘粋€塊級元素。


解決方案3：調(diào)整line-height屬性的取值：
當(dāng)把line-height屬性的取值設(shè)置為0時，則文字之間的間距較小。盡管圖片的垂直對齊方式依然為基線對齊，但是文字的基線不足以顯示出來，所以就看不到這個小距離了。實現(xiàn)代碼如下所示。
div{line-height:0;}

注意，這個屬性不適用于圖片標(biāo)記的，應(yīng)該用于圖片所在的容器標(biāo)記對之上，以保證該容器內(nèi)部的文本行距為0。


解決方案4：調(diào)整font-size屬性的取值：
如果將font-size屬性的取值設(shè)置為0，也可以像解決方案3那樣將文本的大小調(diào)小，則文本的基線就不足以顯示出來了。實現(xiàn)代碼如下所示。

div{font-size:0;}

同理，該屬性的設(shè)置也需要在圖片所在的容器標(biāo)記對之上實現(xiàn)。

標(biāo)題名稱：圖片在DIV中產(chǎn)生底部間隔的解決方法
網(wǎng)頁鏈接：http://jinyejixie.com/news/159028.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管
崇阳县| 阿拉尔市| 揭东县| 常德市| 武邑县| 南康市| 汽车| 丰台区| 中江县| 山丹县| 临沂市| 二连浩特市| 沅陵县| 瑞昌市| 桦甸市| 邛崃市| 龙州县| 喀喇沁旗| 阿拉善右旗| 仁化县| 衡水市| 浪卡子县| 广东省| 景谷| 华阴市| 巴彦淖尔市| 河津市| 夏邑县| 荥经县| 图木舒克市| 太和县| 万源市| 荥经县| 惠东县| 绵竹市| 天柱县| 瑞丽市| 筠连县| 乐都县| 科技| 西和县|