时间戳

首页 > 解决方案 > 我无法删除标题上方的空白区域

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

问题描述

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>

我预计标题上方没有空白区域，但它就在那里。

标签： htmlcss

解决方案

添加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>

推荐阅读