Question

当我把无序列表

时，为什么顶栏会下降？我找不到这背后的原因。请告诉我如何解决这个问题？

body {
  margin: 0;
  padding: 0;
}
.top-bar {
  height: 40px;
  width: 100%;
  background-color: yellow;
}
#menu {
  width: 1020px;
  height: : 100%;
  margin: 0 auto;
  background-color: red;
}
ul {
  background-color: red;
  width: 100%;
  height: 40px;
}

<body>
  <div class="top-bar">
    <div id="menu">
      <ul>
        <li>Menu1</li>
      </ul>
    </div>
  </div>
</body>

Answer 1

默认情况下，ul元素在浏览器中具有margin-top。要删除它，请添加样式

ul {
    margin-top: 0;
}

Answer 2

使用此功能删除浏览器提供的padding和margin

*{
    margin:0;
    padding:0;
}

您将获得有关重置css here

的更多信息

以下是用于重置的css样式列表

http://www.cssreset.com/

为什么Ul上白色空间

2 个答案: