为什么< ul>增加额外的最高保证金？ [英] Why <ul> adds extra top margin?
问题描述
我有一个简单的html页面，其中有一些风格，我不明白为什么会增加一些顶部边距。
I have a simple html page with some style in it and I do not understand why the adds some top margin?
这是源代码：
<!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;到空间已经走了...但是我不高兴，直到我明白为什么。
If I add "margin-top : 0;" to the the space is gone...but I I'm not happy until I understand why.
推荐答案
< ul> 上的边距来自默认浏览器添加到元素的样式。例如，如果你打开Chrome的DevTools并检查< ul> 元素，你会看到这样的样式。 用户代理样式表指的是浏览器的默认样式。 1em 的边缘变成 16px ，因为浏览器有 font-size：16px
The margin on the <ul> comes from the default styling that a browser adds to the element. For example if you open Chrome's DevTools and inspect the <ul> element you'll see styling like this. The user agent stylesheet refers to the browsers default styling. 1em of margin becomes 16px as the browser has a font-size: 16px by default.
由于浏览器之间的默认样式不一样，一个常见的技术是使用重置样式表，例如 Eric Meyer的重置CSS 或 Nicolas Gallagher的normalize.css ，以减少这些浏览器的不一致。
As the default styling isn't the same between browsers a common technique is to use a reset stylesheet, like Eric Meyer's Reset CSS or Nicolas Gallagher's normalize.css, to reduce these browser inconsistencies.
这篇关于为什么< ul>增加额外的最高保证金？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
