我正在CSS中练习网格，并试图移动元素以更好地理解流。我不明白为什么body和html周围有空白。上面有一个额外的10px"；元件3"；以及"；元素1"s行是20px，即使它没有被分配空间；元件1"；仍然显示，而所有margins都等于0？如何删除元素3上面的20px？
*{
margin:0;
padding:0;
border-width:0px;
}
.container {
margin: 20px;
display: grid;
height: 240px;
grid-template-areas: "header header header header"
"main main main main"
"footer footer footer footer";
}
.el1 {
background: rgba(255, 154, 72, 0.5);
margin: 0;
}
.el2 {
background: rgba(255, 0, 0, 0.5);
z-index: 10;
grid-area: main;
margin: 0;
}
.el3 {
background: rgba(0, 128, 0, 0.5);
grid-area: header;
margin: 0;
}
.el4 {
background: rgba(0, 4, 255, 0.5);
grid-area: footer;
margin: -20;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="el1">Element 1</div>
<div class="el2">Element 2</div>
<div class="el3">Element 3</div>
<div class="el4">Element 4</div>
</div>
</body>
</html>元素3上方的边距来自您的容器：
.container {
margin: 20px;
显示元素1是因为它在网格容器中。grid-template-areas只定义项目应该在哪个网格区域中。如果没有该定义，它只显示在一个网格区域中。。。