1

在我正在构建的测试页面上，页面顶部出现了这个奇怪的间距，我不确定这是为什么。

从下面的 CSS 中可以看出，body 标签的边距和内边距设置为 0。

这是测试站点的 URL，看看我所说的间距是什么意思：http: //s361608839.websitehome.co.uk/testsite/index.html

CSS：

body{
background: #4f6ca6;
margin: 0;
padding: 0;
}

#header{
background:url(../images/header_bg.jpg) no-repeat center top;
height: 328px;
width: 100%;
border-bottom: 1px solid #223c6d;
-webkit-box-shadow: 0 8px 6px -6px #254379;
-moz-box-shadow: 0 8px 6px -6px #254379;
box-shadow: 0 8px 6px -6px #254379;       
}

#slider{
width: 960px;
height: 328px;
margin: 0 auto;
}

HTML：

 <div id="header">
 <div id="slider">
 <h1>Test Site</h1>
 <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
 </div>
 </div>
4

3 回答 3

3

您的<h1>标签有30px边距。

这称为检查员：

在此处输入图像描述

学习它，爱它，然后滥用它。

于 2012-04-25T23:13:20.713 回答
3

那是h1元素的上边距。

于 2012-04-25T23:10:20.550 回答
1

您应该考虑对大多数元素进行初始重置。这意味着您最初需要做更多的工作，但会给您更大的控制权并显着简化故障排除。

Meyer 重置是一个非常常见的起点。

于 2012-04-25T23:14:08.880 回答