Css - 我的网页顶部的白边答案

【问题标题】：Css - White margin on top my web pageCss - 我的网页顶部的白边
【发布时间】：2018-02-07 23:43:45
【问题描述】：

我已经尝试了所提供解决方案的所有可能组合来消除该边距，例如：

body {    
    margin: 0 !important;
    padding: 0 !important;
}

和

* {
   margin: 0px;
   padding: 0px;
}

和

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

但这无济于事。事实上，我已经尝试了关于我的主题的前 5 个 stackoverflow 问题中几乎所有合理的解决方案，但仍然没有结果。我的网页是：

body {
  line-height: 1.6;
  color: #3a3a3a;
  font-family: "Arial", sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
}

.main-header {
  background: #3acec2;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>


  <header class="main-header">
    <h1 class="name"><a href="#">Header text here</a></h1>
  </header>

我在 30.08 使用 normalize 版本 7.0 更新。

【问题讨论】：

你能提供有效的sn-p代码吗？
你能附上你的问题或jsfiddle的截图吗？
边距来自h1元素
称为折叠边距，见w3.org/TR/CSS21/box.html#collapsing-margins
@Danield 是的。 “如果元素没有上边框、没有上边距且子元素没有间隙，则流入块元素的上边距与其第一个流入块级子元素的上边距一起折叠。” 是这里适用的部分。

标签： html css margin

【解决方案1】：

删除h1 margin-top 和body 标签的边距。

body {
  line-height: 1.6;
  color: #3a3a3a;
  font-family: "Arial", sans-serif;
  margin:0;
}
a { 
  color: #fff;
  text-decoration: none;
}
.main-header {
  background: #3acec2;
}
.main-header h1 {
  margin-top: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
    <h1 class="name"><a href="#">Header text here</a></h1>
</header>
</body>
</html>

【讨论】：