Question

出于某种原因，我在页面顶部有一个空白。 html：

<body>
   <div id="main">
    <div id="topcontainer">
    <div id="topmenu">
    asdasdsa
    </div>
</div>

css：

body
{
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}

#main
{
width: 1024px;
margin: 0 auto 0 auto;
}

#topcontainer
{
height: 80px;
}

#topmenu
{
height:40px;
background-image:url('../siteimages/topmenu.jpg');
}

#secondmenu
{
height:40px;
}

顶部只有少量的空白区域，有什么想法吗？

Answer 1

body, div { margin: 0; padding: 0; }

Answer 2

大卫已经回答了你的问题，但我想在这里指出css重置。

有很多关于css重置的批评者，但我更喜欢使用meyerweb's css reset

如果你按照开始的方式继续你的html，你会有很多不需要的计算样式，并避免你可以提前重置你的css并继续工作而不会有丑陋的浏览器样式。

希望它有所帮助。思南。

编辑：提到的css的主要部分

/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

Answer 3

您的示例代码缺少结束div。您需要关闭<div id="topcontainer">或<div id="main">。

如上所述，

margin: 0;
padding: 0;

到你的身体css，因为这将删除默认的浏览器边距。或者使用重置样式表。

在我不想要的顶部边缘

3 个答案: