1. 程式人生 > >HTML之多個IMG標籤的間距

HTML之多個IMG標籤的間距

問題描述:

多個IMG標籤之間有間距,且IMG後跟的font標籤也有間距,如下程式碼為例:
  1. <divid="lay1">
  2. <imgsrc="../《JavaScript動態網頁設計經典例項教程》共給網上下載的程式碼/第7章 動態層/jian.gif">
  3. <imgsrc="../《JavaScript動態網頁設計經典例項教程》共給網上下載的程式碼/第7章 動態層/fold_1.gif">
  4. <font>
  5. <ahref="javascript:showSub(1)">所有軟體</a>
  6. </font>
  7. <divid="subLay1"></div>
  8. </div>
效果如圖所示:
這裡寫圖片描述 各標籤之間存在明顯間隙,但是用JS動態在lay1中插入img標籤就不存在這個問題程式碼如下:
  1. lay1.insertAdjacentHTML('AfterBegin','<img src="../《JavaScript動態網頁設計經典例項教程》共給網上下載的程式碼/第7章 動態層/jian.gif"><img src="../《JavaScript動態網頁設計經典例項教程》共給網上下載的程式碼/第7章 動態層/fold_1.gif"><font><a href="JavaScript:showSub(1)">所有軟體</a></font><div id=subLay1
    ></div></div>');
效果對比如下:(上面為JS新增的效果,下面為HTML的效果)這裡寫圖片描述解決方案:這是由IMG標籤之間的空白引起的,去掉空白兩個IMG的空白,如下所示
  1. <div id=“lay2”>
  2. <img src="../《JavaScript動態網頁設計經典例項教程》共給網上下載的程式碼/第7章 動態層/jian.gif"><img src=“../《JavaScript動態網頁設計經典例項教程》共給網上下載的程式碼/第7章 動態層/fold_1.gif”><font><a href=“javascript:showSub(1)”
    >所有軟體</a></font>
  3. <div id="subLay1"></div>
  4. </div>
效果對比如下:(上面為lay1的效果,下面為lay2的效果)這裡寫圖片描述