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

首先：使用“spacer”图像和布局表是一种非常过时的技术。

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

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

2 个答案: