我无法删除标题上方的空白区域[重复]答案

【问题标题】：I can’t remove empty space above my header [duplicate]我无法删除标题上方的空白区域[重复]
【发布时间】：2019-06-08 17:41:51
【问题描述】：

margin-top: 0、padding 和其他东西并没有帮助删除我的标题上方的空白空间。

header {
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: calibri sans-serif;
  font-size: 20px;
  color: white;
  position: relative;
}

html,
body {
  margin: 0;
  padding: 0;
}

.headerlist li {
  list-style: none;
  float: left;
  padding: 15px;
}

.headerlist li>a:link {
  color: white;
  text-decoration: none;
}

<body>
  <header>
    <ul class="headerlist">
      there was some li lines
    </ul>
  </header>
</body>

我希望标题上方没有空白，但它就在那里。

【问题讨论】：

是<ul>’s margin。请使用您的开发工具并查看盒子模型。

标签： html css

【解决方案1】：

将margin:0 添加到您的ul 元素（它具有默认边距值）

header {
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: calibri sans-serif;
  font-size: 20px;
  color: white;
  position: relative;
}

html,
body,
ul {
  margin: 0;
  padding: 0;
}

.headerlist li {
  list-style: none;
  float: left;
  padding: 15px;
}

.headerlist li>a:link {
  color: white;
  text-decoration: none;
}

<body>
  <header>
    <ul class="headerlist">
      there was some li lines
    </ul>
  </header>
</body>

【讨论】：

谢谢，现在运行良好！

【解决方案2】：

需要做以下事情来解决这个问题，

需要将clear 属性添加到ul 元素，因为我们已将li 作为浮动元素。

.headerlist:after, .headerlist:before { 内容： ” ”; 显示：表格；明确：两者； }
ul元素添加了默认边距值，需要移除。
header 不需要指定高度，它会根据子元素自动分配高度。

请参考下面的sn-p。

header {
  width: 100%;
  background-color: black;
  font-family: calibri sans-serif;
  font-size: 20px;
  color: white;
  position: relative;
}

html,
body {
  margin: 0;
  padding: 0;
}
.headerlist:after, .headerlist:before {
    content: " ";
    display: table;
    clear: both;
}
.headerlist {
  margin: 0;
 }
.headerlist li {
  list-style: none;
  float: left;
  padding: 15px;
}

.headerlist li>a:link {
  color: white;
  text-decoration: none;
}

<body>
  <header>
    <ul class="headerlist">
      <li>100</li>
      <li>200</li>
      <li>300</li>
      <li>400</li>
    </ul>
  </header>
</body>

【讨论】：

感谢您的回答，但它要复杂得多，并且有以下内容：之后（之前），我还没有练习过的内容