Question

我似乎无法弄清楚如何让每个元素之间的空间消失。我主要想删除顶部的空白区域。我尝试过使用margin-top:0但它没有用。任何建议都将不胜感激。

这是我的HTML

<body>
    <div style="background-color:green;">
        <h1>top</h1>
    </div>
    <div style="background-color:blue;">
        <h1>body</h1>
    </div>
    <div style="background-color:red;">
        <h1>footer</h1>
    </div>
</body>

这是我的css

body, div, header {
    padding:0;
    margin:0;
    margin-top:0px;
}

Answer 1

在您的CSS中加入h1：

Fiddle

body, div, header, h1 {
    padding:0;
    margin:0;
    margin-top:0px;
}

Answer 2

该空间是由用户代理样式表（浏览器应用的默认样式）引起的。

你也需要针对H1。

html, body, div, h1 {
   margin:0;
}

或者，您可以使用通用CSS选择器*在开始时定位所有内容，而不是单独定位每个元素：

 * {
     margin:0;
     padding:0;
    }

为避免麻烦，您应该使用CSS reset启动CSS。这将在所有元素上设置所有填充，边距等，以确保浏览器从相同的起点解释您的样式，而不是依赖于每个浏览器的单个用户代理样式表。

如果您想要现代化，可以使用Normalise.css

有没有办法删除网页顶部的空间？

2 个答案: