如何删除页面顶部的边距答案

【问题标题】：How to remove the margin at the top of my page如何删除页面顶部的边距
【发布时间】：2013-07-30 12:43:45
【问题描述】：

我想删除页面顶部的边距。我会用截图告诉你我的意思

您可以在我的图片中看到一个红色箭头表示我的问题。我怎样才能删除这个边距？我在这里发布我的css：

div#header {
    background-color: #6495ED;
    background: -moz-linear-gradient(100% 100% 90deg, black, gray);
    background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
    margin: 0px;
    width: 100%;
}
body {
    background-color: #000000;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
h1 {
    text-align: center;
    color: #FFFFFF;
    font-family:  sans-serif;
    font-size: 26px;
    font-weight: bold;
    padding: 5px;
}
ul {
    list-style-type: none;
    padding: 5px;
}

li {
    color: #FFFFFF;
    font-family: sans-serif;
}

p {
    color: #FFFFFF;
    font-family: sans-serif;
    padding: 5px;
}
a {
    text-decoration: none;
    color: #FFFFFF;
}

那么关于如何删除标题上方的边距有什么建议吗？

这里你可以看到我的html：

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>  
        <title>Lista coupon</title>
        <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="../js/memoria.js"          type="text/javascript"></script>
        <style  src="../css/style.css"          type="text/css"></style>
    </head>
    <body onload="loadJson();">
        <div id="header">
            <h1>Lista coupon salvati</h1>
        </div>
        <div id="content">
            <p>Di seguito trovi tutte le promozioni salvate</p>
            <div id="list">
            </div>          
        </div>
        <div id="footer">

        </div>
    </body>
</html>

【问题讨论】：

你的 HTML 代码是什么？
可以发html代码吗
我会发布我的html，对不起
请看我在类似帖子中的评论 stackoverflow.com/a/32968720/5413693>

标签： html css margin

【解决方案1】：

将margin: 0; 设置为<h1> 元素

演示：http://jsfiddle.net/5w6Es/

与 <ul> 元素的 margin-left 或 margin-top / margin-bottom 的 <p> 元素等问题相同。

在页面边框使用它们时，您需要重置它们的默认样式。

【讨论】：

您的解决方案比其他解决方案效果更好，我会使用您的，谢谢！

【解决方案2】：

尝试删除 html 元素的填充和边距，（不仅是 body）

还尝试删除每个浏览器对 h1 元素应用的默认边距（以不同方式），您没有重新定义/重置它可能是 collapsing 在 #header 元素之上

html {
   margin: 0; 
   padding: 0;
}

h1 {
   ...
   margin: 0;  
}

【讨论】：

用您的真实标记填充重现问题的小提琴。无论如何，这似乎确实是与主标题的边距折叠有关的问题：w3.org/TR/CSS2/box.html#collapsing-margins
+1 如果没有 CSS nuller，标题默认有边距，将其设置为 '0' 是正确的方法。经过测试并且（当然）有效。
@RokoC.Buljan 谢谢。这里的问题也是由于应用于不是标题但显然应用于父容器的边距。这就是为什么 easy-n-dirty 解决方案是按照下面的建议对标题应用负边距。但我永远不会推荐它。

【解决方案3】：

需要添加margin:0px;到这个 CSS：http://jsfiddle.net/vv6DL/

h1 {
    text-align: center;
    color: #FFFFFF;
    font-family:  sans-serif;
    font-size: 26px;
    font-weight: bold;
    padding: 5px;
    margin:0px;
}

【讨论】：

【解决方案4】：

你没有说它出现在什么浏览器中。

如果您使用 Firebug 及其工具，您应该能够看到导致间距的原因，然后将其设置为零，但是，“作弊”是使用诸如 Meyers http://meyerweb.com/eric/tools/css/reset/ 之类的重置 css 脚本来清理解决所有这些浏览器的不一致问题。

【讨论】：

我使用的是 Firefox（Gecko 引擎）和 Chrome/Safari（WebKit）

【解决方案5】：

试试这个

h1
{
     margin:0px;
}

【讨论】：

【解决方案6】：

我发现做到这一点的最好方法是在你的 CSS 中添加 :first-child 伪元素到你的第一个元素中，例如你的 body-element 中的<h1> or <ul> 等.

所以上面使用你的标记的例子是

h1:first-child { margin-top: 0; }

这消除了对代码中所有其他 <h1> 元素的干扰，也无需将不必要的 css 类添加到您的 html 标记中。

我希望这会有所帮助，因为我遇到了山姆问题，但提供的答案并不好。

【讨论】：