0

好的,所以我一直在尝试和搜索论坛,以了解我如何摆脱我的 div 之间的空间,例如

http://i.imgur.com/7kqCvQa.png?1(我目前的网站)我想删除页脚和免责声明之间的空格

我的html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Testimonials</title>
        <link rel="stylesheet" type="text/css" href="css.css"
        />
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'
        type='text/css'>
    </head>

    <body>
        <!-- HEADER -->
        <center>
            <div id="header"></div>
            <table width="70%" bgcolor="#FFFFFF">
                <tr>
                    <td width="40%">
                        <img src="images/woodslandscapinglogo2.jpg" width="400" height="124" alt="woods landscaping logo">
                    </td>
                    <td width="60%"></td>
                </tr>
            </table>
            </div>
        </center>
        <!-- END OF HEADER -->
        <!-- NAV BAR -->
        <div id="container">
            <ul id="nav">
                <li class="active"><a href="contactus.html"><span>Contact us</span></a>
                </li>
                <li><a href="testimonials.html"><span>Testimonials</span></a>
                </li>
                <li><a href="gallery.html"><span>Gallery</span></a>
                </li>
                <li><a href="aboutus.html"><span>About us</span></a>
                </li>
                <li class="last"><a href="woodslandscaping.com.au"><span>Home</span></a>
                </li>
            </ul>
        </div>
        <!-- END OF NAV BAR -->
        <!-- CONTENT -->
        <div id="secondcontainer">
            <div id="content" style="width:60%;height:500px;float:left;">
                <center>
                     <h2>About us</h2>

                    <hr>
                     <h4>Here at Woods Landscaping, We provide the highest quality landscapes with all the newest and most efficient techniques. There is no job that is too big or small for us, as we have done large areas of schools, to just front and backyards and we do this at great affordable prices.
    We can provide a range of landscapes that can include:
    <ul><li>Paving</li>
    <li>Decking</li>
    <li>Retaining walls</li>
    <li>Water Features</li>
    <li>Irrigation</li>
    <li>Instant Turf</li>
    <li>Synthetic Turf</li>
    <li>Garden Lighting</li>
    <li>Rock Walls</li>
    <li>Earth Works</li>
    <li>Concreting</li>
    <li>General Soft Landscaping</li>
    <li>Maintenance Service</li></ul>
    So take your pick and call now for a free quote!
    Remember, there is no job too big or small that we can’t handle.
    </h4>
            </div>
            <div id="images" style="width:40%;height:500px;float:left;">
                <img src="images/brighton-1.JPG" alt="" width="298" height="172">
                <img src="images/croydon-2.JPG" alt="" width="298" height="172">
            </div>
        </div>
        <!-- END OF CONTENT -->
        <!-- FOOTER -->
        <div id="footer" style="height:30px;">
            <h3><br>
    Ferntree gully 3156 VIC // abn. 47402024689 // p. 043 359 7007 // e. daniel@woodslandscaping.com.au</h3>
        </div>
        <!-- END OF FOOTER -->
        <!-- DISCLAIMER -->
        <div id="disclaimer" style="height:20px;">
            <h5><br>© 2013 Woods Landscaping, Inc. All rights reserved. &nbsp;&nbsp;&nbsp;</h5>
        </div>
        <!-- END OF DISCLAIMER -->
    </body>

</html>

和我的 CSS

@import url(http://fonts.googleapis.com/css?family=Capriola);
body
{
   margin-left:auto;
   margin-right:auto;
   margin: 0 0 10px;
   background-image:url('images/background.jpg');
}
h1
{
   /* main grey heading*/
   font size: 15pt;
  font-family: Georgia, "Times New Roman", Times, serif;
   color:#999999;
   text-align: left;
}
h2
{
     /* main gray heading*/
    font-size: 15pt;
   font-family:  Georgia, "Times New Roman", Times, serif;
   color:#999999;
   text-align: left;



}
h3
{
     /* smaller footer writing*/
   font-size: 6pt;
   font-weight: 400;
   font-family: 'Droid Sans', sans-serif;
   color:#4D4D4D;
   text-align: center;
}
h4
{
     /* main writing*/
   font-size: 10pt;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: 400;
   color:#999999;
   text-align: left

}
h5
{
     /* smaller disclaimer writing*/
   font-size: 6pt;
   font-weight: 400;
   font-family: 'Droid Sans', sans-serif;
   color:#999999;
   text-align: right;
}
td 
{
vertical-align:bottom;text-align:left;
}
#header 
{
    width: 70% ;
    background-color:#FFF;

}
#nav {

    width: 100%;
    float: right;
    list-style: none;
    background-image: url('images/linkbar.png');
    }
#nav li {
    float: right;
    padding-right: 40px; }

#nav li a {
   display: block;
   padding: 8px 15px;
   color:#ffffff;
   font-family:Trebuchet MS, "Helvetica", sans-serif;
   font-size: 0.75em; 
   text-align: ;
   text-decoration: none; 
        }
#nav li a:hover {
        color:#17AF49;
        background-color: #ffffff;
         }
#container{
    width:70%;margin:0 auto;text-align:center;
    }

#secondcontainer{
    width:70%;margin:0 auto;text-align:center;
    background-color: #ffffff;
    }

#content 
{
    width: 60%;
    margin-left: auto ;
    margin-right: auto ;
    margin-top:0;
    background-color:#FFF;
}
#images
{
    width: 40%;
    margin-left: auto ;
    margin-right: auto ;
    margin-top:0;
    background-color:#FFF;
}

#footer {
    background-color:#808080;
    width: 70%;
    margin-left: auto ;
    margin-right: auto ;
    clear:both;
    text-align:center;
}
#disclaimer {
    background-color:#4D4D4D;
    width: 70%;
    margin-left: auto ;
    margin-right: auto ;
    clear:both;
    text-align:center;
}



</style>
4

4 回答 4

1

空间来自哪个浏览器添加默认边距的<h5>标签内,将#disclaimer其添加到您的 CSS

#disclaimer h5{
    margin: 0;
}
于 2013-08-28T06:42:15.087 回答
0

尝试设置

h5
{
-webkit-margin-before: 0px;
}
于 2013-08-28T06:42:59.163 回答
0

您必须为margin:0H3 和 H5 标签设置 a 并使用边距属性将标题放置在 div 中。

此外,使用<br>插入空格有点糟糕。浏览器不会为此标签插入的新行提供相同的大小,结果可能会很混乱。

于 2013-08-28T06:42:08.307 回答
0

您可以分别从 theh3和insideh5中删除顶部/底部边距footerdisclaimer如下所示:

#footer h3, #disclaimer h5 {
    margin:0 auto; /* auto reflects the settings you've already defined */
}

问:您是否考虑过将 HTML 重构为对标准更友好且跨浏览器的一致性?

于 2013-08-28T06:49:29.537 回答