<分区>
标签 css
<分区>
我是一名相对较新的自学前端开发人员。我的文件上边距有这个问题。它仍然是顶部的边缘。
通常我一直在使用 * 选择器，它在每个元素上都没有留下任何边距。但有人告诉我这不是一个好方法，你不想从每个元素中删除所有边距和填充(？)。
所以我尝试使用 body 选择器，并给了 margin: 0;和填充:0；但它仍然是最重要的。这样做的“正确”方法是什么？
下面是我的html和css。
@import url('https://fonts.googleapis.com/css?family=Work+Sans:500');
body {
padding: 0;
margin: 0;
}
header {
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<header id="top">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>Semi heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h2>Semi Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</body>
</html>最佳答案
原因是一种称为“边距坍塌”的现象:无论元素首先进入体内，它的 margin-top将与主体边距顶部“折叠”(=联合)。所以，在你的情况下，这是第一个 h1元素(其默认边距由浏览器样式表定义)，其 margin-top 扩展 body，为 body 创建一个 maring-top。
您可以应用它来避免这种现象:
h1:first-of-type {
margin-top: 0;
}
注意:通常，h1将在 header 或类似的东西内，通常是 DIV，带有填充等。所以你不必应用它，因为那个 h1 的容器。可能不会有 margin-top和 h1不会放在页眉的最顶部。
@import url('https://fonts.googleapis.com/css?family=Work+Sans:500');
body {
padding: 0;
margin: 0;
}
header {
background-color: red;
}
h1:first-of-type {
margin-top: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<header id="top">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>Semi heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h2>Semi Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</body>
</html>关于CSS <body> 上边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47563582/