HTML之多个IMG标签的间距

问题描述：

多个IMG标签之间有间距，且IMG后跟的font标签也有间距，如下代码为例：

   
    
    
     
     <div id="lay1">
     
         <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动态在lay1中插入img标签就不存在这个问题

代码如下：

   
    
    
     
     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的空白，如下所示：

   
    
    
     
     <div id=“lay2”>
     
        <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>

效果对比如下： （上面为lay1的效果，下面为lay2的效果）

HTML之多个IMG标签的间距

猜你喜欢