목록 태그 및 표 태그에서 HTML의 공백 제거

Question

자바 스크립트 메뉴와 그 바로 아래의 이미지 사이의 공백을 제거하기 위해 여러 온라인 소스 및 tutorials을 검색했습니다. 만약 그렇다면

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

, 그것의 : 심지어 물리적 차이를 만드는과 공백을 제거합니다 있는지 확인하기 위해 CSS이 추가

<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

시도는 아무 소용이 코드에서 공백을 제거 여백이나 패딩을 원하는 것에 맞추는 것만으로도 충분합니다.

살펴볼 또 다른 사항은 해당 요소의 선 높이입니다. 시도해보십시오.

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

보기 좋은 예제 페이지가 좋을 것입니다.

Answer 2

첫째로 : "스페이서"이미지와 레이아웃 테이블을 사용하는 것은 매우 구식 인 기술입니다. https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps