Question

我是一名相对较新的自学成才的前端开发人员。我的文档上边距有这个问题。它仍然是一个优势。

通常我一直在使用*选择器，它在每个元素上都没有留下任何余量。但我被告知这不是一个很好的方法，你不想从每个元素（？）中删除所有边距和填充。

所以我试图使用身体选择器，并给出了这个余量：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>

Answer 1

原因是一种称为“崩溃边缘”的现象：无论什么元素首先进入体内，其margin-top将与身体边缘顶部“崩溃”（=联合）。因此，在您的情况下，这是第一个h1元素（由浏览器样式表定义的默认边距），其margin-top扩展了body，为body创建了maring-top。

你可以用它来避免这种现象：

h1:first-of-type {
  margin-top: 0;
}

注意：通常，h1将位于标题内或类似的内容中，通常是DIV，使用填充等。因此您不必应用此内容，因为{{{}}的容器1}}可能没有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;
}

CSS上边距

1 个答案: