从列表标记和表格标记中删除HTML中的空白

Question

我已经搜索了几个在线消息来源和tutorials删除Javascript菜单和它下面的图像之间的空白区域。我甚至物理删除从代码的空间，但无济于事

<tr> 
     <td width="43" height="999" rowspan="16"> 
      <img src="images/spacer.gif" width="43" height="999" alt=""></td> 
     <td colspan="13"> 
      <img src="images/Logo.gif" width="458" height="91" alt="The App-properties logo"> 
           <img src="images/Banner.gif" width="456" height="91" alt="Featured realestates"> 

              <ul class='dd_menu' style="margin-top: 0; margin-bottom:0px;"> 
      <li> <img src="images/homeButton.gif" width="238" height="25" alt="App-properties Hompage"> <ul><li><a href='about_us.html' title="About App-properties"><p style="margin-bottom:0;">About Us</p></a></li></ul></li> 
      <li><img src="images/salesButton.gif" width="97" height="24" alt="Property buying tips"> 
      <ul> 
       <li><a href='latest_properties.html' title="latest properties in Spain"><p style="margin-bottom:0;">Featured Property</p></a></li> 
       <li><a href='guide_to_buying.html' title="How to buy real estate"><p style="margin-bottom:0;">Guide to buying in spain</p></a></li> 
       <li><a href='selling_property_tips.html' title="how to sell real estate"><p style="margin-bottom:0;">Sell your property with us</p></a></li> 
      </ul> 
      </li> 
       <li><img src="images/rentalsButton.gif" width="94" height="23" alt="Renting property and real estate in spain"> 
      <ul> 
       <li><a href='renting_property.html' title="renting property in Spain"> <p style="margin-bottom:0;">Search for a property</p></a></li> 
       <li><a href='benefits_rented_property.html' title="Benefits of renting property at App-properties" ><p style="margin-bottom:0;">Rent your property with us</p></a></li> 
      </ul> 
      </li> 
      <li><img src="images/mortgageButton.gif" width="118" height="24" alt="Buying property in Spain on a mortgage"> 
      <ul> 
       <li><a href='realestate_finance.html' title="Financial assistance in buying real estate"><p style="margin-bottom:0;">Financial services we offer</p></a></li> 
      </ul> 
      </li> 
       <li><img src="images/constructionButton.gif" width="97" height="24" alt="Constructing a new structure in a real estate"> 
      <ul> 
       <li><a href='building_construction_spain.html' title="Building construction in Spain"><p style="margin-bottom:0;">Construction, reforms, planning & licences</p></a></li> 
       <li><a href='disadvantages_building_in_spain.html' title="Difficulty in building in Spain"><p style="margin-bottom:0;">Is it hard to build in Spain?</p></a></li> 
      </ul> 
      </li> 
       <li><img src="images/contactUs.gif" width="264" height="24" alt=""> 
      <ul> 
       <li><a href='contact_us.html' title="Location of App-properties"><p style="margin-bottom:0;">Address</p></a></li> 
       <li><a href='contact_us.html' title="Email of App-properties"><p style="margin-bottom:0;">E mail</p></a></li> 
       <li><a href='contact_us.html' title="Phone number of App-properties"><p style="margin-bottom:0;">Phone number </p></a></li> 
      </ul> 
      </li> 
      </ul> 
     </td> 
    </tr> 
    <tr> 
     <td width="19" height="122" colspan="2" rowspan="3"> 
      <img src="images/spacer.gif" width="19" height="122" alt=""></td> 
     <td colspan="10"> 
      <img src="images/pathShower.gif" width="880" height="32" alt="Website Current location"></td> 
     <td width="16" height="883" rowspan="15"> 
      <img src="images/spacer.gif" width="16" height="883" alt=""></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="32" alt=""></td> 
    </tr> 

Answer 1

尝试增加给你的CSS，看它是否有差别，并删除空白：

ul, li { margin:0 !important; padding:0 !important; } 

如果确实如此，这是只是将边距或填充设置为需要的问题。

要看的另一件事是这些元素的行高。尝试：

ul, li { line-height: 100%: } 

看一个现场示例页面会很好。

Answer 2

首先：使用“间隔”图像和布局表，这是一个非常过时的技术。

您的实际问题可能是这样：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps