Question

很抱歉在我问过之前问过很多相同的问题...我已经阅读了很多这些问题并且他们都说改变

margin: 0;

两个div之间有差距（div class =“heady”和div class =“menus”）我似乎无法摆脱白色空间，希望它足够清楚，让我知道是否它没有。

谢谢詹姆斯。

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>website</title>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <link rel="stylesheet" type="text/css" href="CSS/style1.css" />
    <body>
    <div class="heady">

    <br></br>
    <h1><a class="header" href="index.html">website</a></h1>
    </div>

    <div class="menus">

    <ul>
        <il><a class="list" href="x.html">About</a></il>
        <t> | </>
        <il><a class="list" href="y.html">Beginners</a></il>
        <t> | </>
        <il><a class="list" href="z.html">Advanced</a></il>
        <t> | </>
        <il><a class="list" href="contact.html">Contact</a></il>

    </ul>
    </div>

    </body>
</html>

CSS

/*general rules*/

html,body {
    font-size:11pt;
    font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
    color: black;

    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    background-color: white;
    padding-top: 0px;
    margin-top: 0px;

}

h1 {  
    font-size: 25pt;
    margin-left:10px;
    margin-bottom:0;
    padding-bottom: 0;
}

a:link, a:visited {
    color: white;
}
a:hover, a:active {
    color: grey;
} 



/*header section rules*/
div.heady {
            height: 200px;
            width: 760px;
            padding: 0;
            background-color: grey;
            background-repeat:no-repeat;
             margin: 0;
 }

a.header {
    text-decoration: none;
 }
 a.header:link, a.header:visited, a.header:active,a.header:hover  {
    color: red;
    margin:0;

 } 

 div.menus {
 padding: 0;
 margin:0;
 background-color:black;
 width: 760px;
 text-align: center;
 font-size:12pt;

 }

 a.list {
 margin:0;
 }

以下是jsFiddle的链接。

Answer 1

浏览器将默认样式应用于ceratin元素。在这种情况下，ul获得一定余量。请注意，即使div本身没有边距，此边距也会分隔div。

使用

ul { margin: 0; }

或包含reset stylesheet

Answer 2

您是否正在使用适用于Firefox的Firebug插件？即使您还没有使用firefox，也应该将它与firebug插件一起下载。使用Firebug，您可以查看源代码中的元素，查看正在应用的样式，布局（宽度/高度，填充，边距），甚至操纵样式以查看CSS中的更改。< / p>

我强烈推荐它！

Download Firefox
Download Firebug

Answer 3

  .heady { display:block; }
  .heady { margin:0; padding:0; }
  .heady { line-height:100%; /* or even 0 (if no text present) */ }

内容可以在这里愚弄，但其中一个或全部3个应该在浏览器中驯服野兽。

谷歌也进行“css重置”

div之间的另一个空白区域

3 个答案: