gpt4 book ai didi

css - 为什么
    会增加额外的上边距?

转载 作者:行者123 更新时间:2023-11-28 00:26:22 25 4
gpt4 key购买 nike

我有一个简单的 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;”空间消失了……但我不高兴,直到我明白为什么。

最佳答案

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

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

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

关于css - 为什么 <ul> 会增加额外的上边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54619216/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com