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>タグ内のタグから取得されます。これを CSS に追加します。#disclaimer

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

margin:0H3 および H5 タグにa を設定し、margin プロパティを使用してヘッダーを div に配置する必要があります。

さらに、<br>スペースを挿入するために使用するのはちょっと悪いです。ブラウザーは、このタグによって挿入された新しい行に同じサイズを与えないため、結果が乱雑になる可能性があります。

于 2013-08-28T06:42:08.307 に答える