Question

我有一个简单的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>

这是“讨厌的”空间。

enter image description here

如果我添加“margin-top：0;”这个空间已经消失了......但是在我明白为什么之前，我并不开心。

Answer 1

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

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

Default <code><ul></code> styling taken from Chrome's DevTools

Answer 2

典型的默认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

Answer 3

根据此问题Browsers' default CSS stylesheets

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

或者您也可以使用reset.css

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 4

Sheesh，请阅读OP人员。

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

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

如果它没有边缘聚集在一起，世界就会燃烧，宇宙会崩溃，人们会在阅读页面，书籍，海报，快餐杯等内容时遇到困难。

所应用的保证金是所有媒介的标准化。打印，网络，yada。这就是原因。

现在无序列表已经被网络中的许多其他领域采用，以解决导航，下拉和许多其他噱头，这就是为什么每个人都在重置，因为ul可以用于其他目的以外的目的。

如果您选择脱离传统的标准化，无论出于何种原因，那么我个人不建议重置。但是，在大多数情况下，我确实批准了normalize.css - 再次只使用你需要的东西，但它努力使＃34;正常化＆＃34;浏览器默认样式的差异，而不是完全清除它们。

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

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

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

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

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

在这里，我甚至做了fiddle

Answer 5

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

点击此处stackoverflow

您也可以查看here

Answer 6

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

Answer 7

它是大多数浏览器提供的默认CSS行为。它一直存在于网络的黎明。

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

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

8 个答案: