边距增加其他 div 的大小答案

【问题标题】：Margin increases size of other divs边距增加其他 div 的大小
【发布时间】：2021-11-24 06:23:13
【问题描述】：

所以我一直在学习网格系统，遇到了一些让我非常困惑的事情。当我出于某种原因想为其中一个 div 提供 margin-bottom 时，它会增加它旁边的 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>

【问题讨论】：

看起来你想要砖石布局之类的东西（查一下）。您所描述的是默认行为，这就是网格应该如何工作。

标签： html css css-grid margin

【解决方案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>

【讨论】：