重慶億數信息技術有限公司(官方網站)歡迎您的到來!
24小時咨詢電話:023-68659593    13637900022
重慶網站建設公司
重慶做網站建設的公司 重慶網站建設 重慶億數信息技術有限公司官方網站 重慶網站制作 億數官網 重慶做網站建設公司
 
綞茬珯鐤戝晱瑙g瓟
重慶網站建設為給客戶提供優質的設計服務!
圖片在DIV中產生底部間隔的解決方法
關鍵字:重慶網站建設公司|重慶做網站的公司  來源:重慶億數網站建設公司   閱讀:5123

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

既然知道了這個距離產生的原因,那么就容易處理了。

解決方案1:調整vertical-align屬性的取值:
既然這個距離是由圖片的vertical-align屬性的默認取值為baseline產生的,那么就可以調整該屬性的取值不再是baseline即可。
將圖片的vertical-align屬性設置為bottom、middle、top均可。實現代碼如下所示。
div img{vertical-align:middle;}

解決方案2:調整display屬性的取值:
我們知道,vertical-align屬性只適用于內聯元素。那么只需要將圖片由內聯元素改為塊級元素即可。
修改元素的狀態可以采用CSS技術中的display屬性。實現代碼如下所示。
div img{display:block;}
上述代碼將<img />標記變為了一個塊級元素。

解決方案3:調整line-height屬性的取值:
當把line-height屬性的取值設置為0時,則文字之間的間距較小。盡管圖片的垂直對齊方式依然為基線對齊,但是文字的基線不足以顯示出來,所以就看不到這個小距離了。實現代碼如下所示。
div{line-height:0;}
注意,這個屬性不適用于圖片標記的,應該用于圖片所在的容器標記對之上,以保證該容器內部的文本行距為0。

解決方案4:調整font-size屬性的取值:
如果將font-size屬性的取值設置為0,也可以像解決方案3那樣將文本的大小調小,則文本的基線就不足以顯示出來了。實現代碼如下所示。
div{font-size:0;}
同理,該屬性的設置也需要在圖片所在的容器標記對之上實現。

本信息由重慶億數信息技術有限公司網站建設部提供。www.4979667.live未經授權請勿轉載!
上一篇: 沒有了
下一篇: 沒有了
新聞觀點
推薦文章
常見問題
設計 網站建設 網絡營銷 軟件開發
網站設計 網站開發 搜索引擎優化(seo) 軟件定制開發
平面設計 域名購買 百度、谷歌搜索引擎排名 OA辦公自動化
FLASH動畫設計 空間、服務器購買 線上網絡品牌戰略策劃 ERP企業管理軟件
廣告片設計 網站備案 線下活動品牌落地策劃  
公司地址:重慶市九龍坡區歇臺子科園四路223#-7-2號
咨詢電話:023-68659593  15523549886  13637900022
客服人員:276389867  /  84939066  /  1102237603
公司郵箱:[email protected]
首頁  |  關于我們  |  聯系我們  |  付款方式  |  誠聘英才  |  重慶網站建設  |  在線留言  |  友情鏈接  |  網站地圖
COPYRIGHT © 2013 版權所有:重慶億數信息技術有限公司(官方網站)  |  備案/許可證編號為:渝ICP備13001898號    網址:www.4979667.live  
友情鏈接
菜鸟娱乐安卓