边距增加了其他div的大小

Question

因此，我一直在学习网格系统，并遇到了一些让我非常困惑的事情。当我出于某种原因想要给其中一个div设置下边距时，它会增加它旁边的div的高度。你知道我错过了什么吗？所以我给了.box-2一个100px的底部边距，同时在底部创建了100px的空间，而它旁边的.box-1会增加高度。

​

.container
{
display:grid;
grid-template-columns:1fr 1fr
}

.item
{
  border:2px solid;
  text-align:center;
}

.box-1
{
  background-color:blue;
}

.box-2
{
  background-color:purple;
  margin-bottom:100px
}

.box-3
{
  background-color:orange;
}

.box-4
{
  background-color:red;
}

<div class = "container">
<div class = "item box-1">
  <h1>One</h1>
</div>

<div class = "item box-2">
   <h1>Two</h1>
</div>
  

<div class = "item box-3">
   <h1>Three</h1>
</div>

<div class = "item box-4">
   <h1>Four</h1>
</div>
</div>

​

Answer 1

我想这就是你想要实现的。

​

.container
{
display:grid;
grid-template-columns:1fr 1fr;
}

.item
{
  border:2px solid;
  text-align:center;
}

.box-1
{
  background-color:blue;
  
}

.box-2
{
  background-color:purple;
  
 
}

.box-3
{
  background-color:orange;
  margin-bottom:100px;
}

.box-4
{
  background-color:red;
}

<div class = "container">
  <div>
<div class = "item box-1">
  <h1>One</h1>
</div>

<div class = "item box-2">
   <h1>Two</h1>
</div>
   </div>
  
<div>
<div class = "item box-3">
   <h1>Three</h1>
</div>

<div class = "item box-4">
   <h1>Four</h1>
</div>
</div>
</div>

​