vvv&

如何解決image圖片布局下邊的多余空隙[專業(yè)建站]：

1、將圖片轉(zhuǎn)換為塊級(jí)對(duì)像
即，設(shè)置img為：
display:block;
在本例中添加一組CSS代碼：
#sub img {display:block;}

2、設(shè)置圖片的垂直對(duì)齊方式
即設(shè)置圖片的vertical-align屬性為「top，text-top，bottom，text-bottom」也可以解決。如本例中增加一組CSS代碼：
#sub img {vertical-align:top;}

3、設(shè)置父對(duì)象的文字大小為0px
即，在#sub中添加一行：
font-size:0;
可以解決問題。但這也引發(fā)了新的問題，在父對(duì)像中的文字都無法顯示。就算文字部分被子對(duì)像括起來，設(shè)置子對(duì)像文字大小依然可以顯示，但在CSS效驗(yàn)的時(shí)候會(huì)提示文字過小的錯(cuò)誤。

4、改變父對(duì)象的屬性
如果父對(duì)象的寬、高固定，圖片大小隨父對(duì)像而定，那麼可以設(shè)置：
overflow:hidden;
來解決。如本例中可以向#sub中添加以下代碼：
width:88px;height:31px;overflow:hidden;

5、設(shè)置圖片的浮動(dòng)屬性
即在本例中增加一行CSS代碼：
#sub img {float:left;}
如果要實(shí)現(xiàn)圖文混排，這種方法是很好的選擇。

6、取消圖片標(biāo)簽和其父對(duì)象的最後一個(gè)結(jié)束標(biāo)簽之間的空格。

文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/div_css/821.shtml)

本文由廣州網(wǎng)站建設(shè)公司-三行網(wǎng)絡(luò)原創(chuàng)，轉(zhuǎn)載請(qǐng)保留版權(quán)（廣州網(wǎng)站建設(shè)huiduochem.com ）三行網(wǎng)絡(luò)——專注于企業(yè)網(wǎng)站建設(shè)、響應(yīng)式營銷型網(wǎng)站定制，歡迎來電咨詢！熱線：020-85628720、15915767698