寫了個如下的代碼,但是顯示的結果是圖片之間有縫隙,這個代碼不是很完美,原本希望的結果是圖片之間完全是零距離的:
<div style=”width:620px; height:50px;”>
<ul>
<li><a href=”#”><img src=”uploadfile/liyongjin.gif” width=”130″ height=”50″></a>
<a href=”#”><img src=”uploadfile/wangsuhong.gif” width=”100″ height=”50″></a>
<img src=”uploadfile/xiangchun.gif” width=”240″ height=”50″>
<img src=”uploadfile/guilei.gif” width=”150″ height=”50″></li>
</ul>
</div>
該如何去掉圖片間的縫隙呢?
查閱了相關的資料,在考慮將邊框設置為0,不知道可不可行,試試看,下面是重新修改過的代碼:
<div style=”width:620px; height:50px;”>
<ul>
<li><a href=”#”><img src=”uploadfile/liyongjin.gif” width=”130″ height=”50″ border=0></a>
<a href=”#”><img src=”uploadfile/wangsuhong.gif” width=”100″ height=”50″ border=0></a>
<img src=”uploadfile/xiangchun.gif” width=”240″ height=”50″>
<img src=”uploadfile/guilei.gif” width=”150″ height=”50″></li>
</ul>
</div>
但是結果還是不盡人意,跟最開始的代碼是一樣的,那到底用哪個屬性可以將圖片間的間距給消除呢?間距?那就試試margin看看。
這個需要用到重置標簽的樣式, *{margin:0;padding:0;} 這只所有的標簽的內外間距都為0,就可以了,而且實際我們在做重構頁面的時候在公用樣式上都必須重置用到的所有標簽的這個屬性。
在<head>里增加一個CSS樣式聲明,將重置標簽放到里面,即加上:
<head>
<style type=”text/css”>
*{margin:0,padding:0;}
</style>
</head>
這樣這個目標就完美的實現(xiàn)了。
新聞熱點
疑難解答