Question

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>

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

Answer 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>

Answer 2

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

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

.headerlist：after，.headerlist：before { 内容：“”；显示：表；清楚的 }
为ul元素添加了默认边距值，需要将其删除。
不需要为标题指定高度，它将根据其子元素自动分配高度。

请参考以下代码段。

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>

我无法删除标题上方的空白区域

2 个答案: