3

我想删除页面顶部的边距。我会用截图告诉你我的意思在此处输入图像描述

您可以在我的图片中看到一个红色箭头表示我的问题。我怎样才能删除这个边距？我在这里发布我的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>
4

6 回答 6

7

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

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

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

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

于 2013-07-30T12:56:30.087 回答
3

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

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

html {
   margin: 0; 
   padding: 0;
}

h1 {
   ...
   margin: 0;  
}
于 2013-07-30T12:49:02.727 回答
2

您需要添加边距：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;
}
于 2013-07-30T12:56:48.287 回答
1

你没有说它发生在什么浏览器中。

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

于 2013-07-30T12:48:09.957 回答
1

试试这个

h1
{
     margin:0px;
}
于 2013-07-30T12:59:14.280 回答
0

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

因此，使用上面的标记的示例是

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

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

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

于 2016-07-28T13:15:27.277 回答