如何删除无序列表和div之间的空格答案

【问题标题】：How to remove the space between a unordered list and a div如何删除无序列表和div之间的空格
【发布时间】：2015-05-23 22:11:31
【问题描述】：

我想知道如何删除无序列表和 div 之间的垂直空间。我知道使用 - 边距是可能的，但我觉得这并不是一个真正干净的方法。

这是我的代码：

 .menu {
   list-style-type: none;
   background-color: #660066;
 }
 .menu li {
   display: inline;
   padding-left: 40px;
   padding-right: 40px;
 }
 .div {
   width: 100%;
   height: 500px;
   background-color: #660066;
 }

<nav>
  <ul class="menu">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
    <li>Check 4</li>
  </ul>
</nav>
<article class="div">

【问题讨论】：

为什么你觉得使用边距不是一个干净的方法？
@sdcr 他说的是负边距。
@dowomenfart 哦，是的，刚刚意识到这一点。
除了您的问题之外，我还添加了一些其他信息。

标签： html css

【解决方案1】：

在这种情况下，您的 ul 只是在顶部和底部有标准边距。边距：0；解决这个问题。

jsfiddle

ul{
    margin: 0;
}

【讨论】：

【解决方案2】：

始终为 UL 和 LI 执行如下所示的重置。这样，只有当您自己应用它们时才会出现空格。

ol, ul {
  margin: 0;
  padding: 0;
}

Click here to see why it is important to set a reset.

【讨论】：

【解决方案3】：

您必须设置您的位置，因为您要移动到靠近原始位置的位置，您的位置将从那里相对移动，您可以向上或向下移动它，它应该看起来像这样

.div

位置：相对；

底部：30px;

【讨论】：