为什么 <ul> 会增加额外的上边距？答案

【问题标题】：Why <ul> adds extra top margin?为什么 <ul> 会增加额外的上边距？
【发布时间】：2015-02-21 10:56:48
【问题描述】：

我有一个带有一些样式的简单 html 页面，但我不明白为什么要添加一些上边距？

这里是来源：

<!doctype html>
<html>

<head>
  <title></title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      background-color: #ffffcc;
    }
    #content {
      width: 900px;
      margin-left: auto;
      margin-right: auto;
      border: 0;
      background-color: #ccccff;
    }
  </style>
</head>

<body>
  <div id="content">
    <div>
      <ul>
        <li><a href="./xxx.html">xxx</a>
        </li>
        <li><a href="./yyy.html">yyy</a>
        </li>
        <li><a href="./zzzz.html">zzz</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

这里是“烦人”的地方。

如果我添加“margin-top : 0;”到空间消失了......但我不高兴，直到我明白为什么。

【问题讨论】：

你在哪些浏览器上测试过这个？
使用 ul {margin: 0px;}
@jbutler483 Mozilla 34.0.5、Chrome 39.0.2171.95 m 和 IE 11.0.9600.17358
@AmanRawat 我看到将边距设置为 0 可以正常工作（请参阅我的整个问题），但真正的问题是为什么？
w3.org/TR/CSS2/box.html#collapsing-margins

标签： css html

【解决方案1】：

典型的默认 UL 样式

ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px; }

Reference

如果你想在你的 html 中使用普通的 css，你可以在你的样式表中添加一些 css

Vanilla CSS

【讨论】：

margin-before 对我来说是一个新的

【解决方案2】：

它应该是一个用户代理样式表。您的浏览器会在每个 <ul> 元素上添加该边距。

在这里查看stackoverflow

您也可以查看here

【讨论】：

【解决方案3】：

根据这个问题Browsers' default CSS stylesheets

添加*{margin:0; padding:0;}，这将删除浏览器给出的默认margin和padding

或者你也可以使用reset.css

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  background-color: #ffffcc;
}
#content {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  background-color: #ccccff;
}

<div id="content">
  <div>
    <ul>
      <li><a href="./xxx.html">xxx</a>
      </li>
      <li><a href="./yyy.html">yyy</a>
      </li>
      <li><a href="./zzzz.html">zzz</a>
      </li>
    </ul>
  </div>
</div>

【讨论】：

问题是它为什么存在，而不是如何删除它

【解决方案4】：

<ul> 的边距来自浏览器添加到元素的默认样式。例如，如果你打开 Chrome 的 DevTools 并检查 <ul> 元素，你会看到这样的样式。 用户代理样式表指的是浏览器的默认样式。边距的1em 变为16px，因为浏览器默认有font-size: 16px。

由于浏览器之间的默认样式不同，一种常见的技术是使用重置样式表，例如Eric Meyer's Reset CSS 或Nicolas Gallagher's normalize.css，以减少这些浏览器不一致。

【讨论】：

【解决方案5】：

您需要重置您的 css 或每个浏览器对某些元素使用一些默认 css 规则。使用像 normalize.css 这样的重置 css 或像 bootstrap 和 foundation 这样的一些 ui 框架

【讨论】：

【解决方案6】：

这是大多数浏览器呈现的默认 CSS 行为。它从网络的黎明就一直存在。

【讨论】：

【解决方案7】：

天哪，请阅读 OP 的人。

无序列表最初用于页面上的内容，与段落和/或标题元素相同。它们具有默认的浏览器边距，可以在文本块之间应用逻辑空白，以便于阅读。

这是一个项目符号列表
这是另一个列表项
注意上下间距

如果它没有边距地聚在一起，世界就会燃烧，宇宙就会崩溃，人们将无法阅读页面、书籍、海报、快餐杯等上的内容。

应用的边距是所有媒体的标准化。打印，网络，雅达。这就是它的原因。

现在，无序列表已被用于网络中的许多其他领域，以解决导航、下拉菜单和大量其他噱头，这就是为什么每个人都在抱怨重置，因为 ul 可以用于其他目的超出了最初的预期。

如果您出于某种原因选择脱离常规标准化，那么我个人不建议重新设置。不过，我确实赞成 normalize.css，在大多数情况下——再次只使用你需要的东西，但它努力“规范化”浏览器默认样式的差异，而不是完全清除它们。

我真正推荐的是，您可以根据自己的需要创建自己的样式。如果您不想要段落、标题和列表的边距，那么只需编写：

ul,ol,p,h1,h2,h3{ margin-top:0; margin-bottom:0 }

它纤薄、轻巧，并且不需要对您甚至不使用的元素进行杂乱的重置。只使用你需要的东西。或者更好的是，您可能希望在某些时候使用默认边距，而不是尝试：

.no-vmargin{ margin-top:0; margin-bottom:0 }

现在任何您不希望有上边距或下边距的元素都可以应用class="no-vmargin"，因为这不是很语义化，您可能应该遵循特定于您需要的分类命名约定。但这完全是另一个话题。

在这里，我什至给你发了fiddle

【讨论】：

是的！事实上*{ margin: 0; padding: 0} 将导致电子邮件模板呈现到左侧。虽然您的解决方案更好。为了减少干扰，只需 ul{ margin-top:0; margin-bottom:0 } 即可。

【解决方案8】：

<!doctype html>
<html>

<head>
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: #ffffcc;
        }
        
        #content {
            width: 900px;
            margin-left: auto;
            margin-right: auto;
            border: 0;
            background-color: #ccccff;
        }

        #content ul {
            font-size: 0;
        }
        
        #content ul a {
        font-size: 16px;
        }
        
    </style>
</head>

<body>
<div id="content">
    <div>
        <ul>
            <li><a href="./xxx.html">xxx</a>
            </li>
            <li><a href="./yyy.html">yyy</a>
            </li>
            <li><a href="./zzzz.html">zzz</a>
            </li>
        </ul>
    </div>
</div>
</body>

</html>

【讨论】：