-2

很抱歉在我问过很多人之前问过同样的问题......我读过很多这些，他们都说改变

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的链接。

4

3 回答 3

3

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

利用

ul { margin: 0; }

或包含一个重置样式表

于 2012-05-16T19:43:04.550 回答
1

你在使用 Firefox 的 Firebug 插件吗？即使您还没有使用 firefox，也应该将其与 firebug 插件一起下载。使用 Firebug，您可以查看源代码中的元素并查看正在应用的样式、布局（宽度/高度、填充、边距），甚至可以操作样式以查看 CSS 中的更改会做什么。

我强烈推荐它！

下载火狐
下载火狐

于 2012-05-16T20:10:47.620 回答
0 
  .heady { display:block; }
  .heady { margin:0; padding:0; }
  .heady { line-height:100%; /* or even 0 (if no text present) */ }

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

谷歌也有“css重置”

于 2012-05-16T19:38:43.570 回答