Question

我想删除页面顶部的边距。我将通过屏幕截图 enter image description here

向您展示我的意思

你可以在我的照片中看到有一个红色箭头表示我的问题。我怎么能删除这个保证金？我在这里发布我的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>

Answer 1

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

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

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

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

Answer 2

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

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

html {
   margin: 0; 
   padding: 0;
}

h1 {
   ...
   margin: 0;  
}

Answer 3

您需要添加保证金：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;
}

Answer 4

你没有说出它出现的浏览器。

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

Answer 5

试试这个

h1
{
     margin:0px;
}

Answer 6

我发现这样做的最好方法是将css中的：first-child 伪元素添加到您身体内的第一个元素，例如<h1> or <ul>等等 - 元素。

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

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

这样可以避免干扰代码中的所有其他<h1>元素，也不会在html标记中添加不必要的css类。

我希望这会有所帮助，因为我遇到了山姆问题而且提供的答案运气不佳。

如何删除页面顶部的边距

6 个答案: