CSS 间隙与边距

Question

CSS的gap属性和margin属性之间的主要区别是什么？对于以下 html 代码，什么时候应该使用间隙和边距？

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

Answer 1

gap

css 属性和

margin

之间的主要区别在于

gap

在项目之间创建空间，而

margin

在每个项目周围创建空间。例如，下面的

gap

用于在网格项之间创建 20 像素的空间。在第二个示例中，边距用于在每个弹性项目周围创建 10 个像素的空间。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

/* I. option: Using gap */
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* II. option: Using margin */
.container {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.item {
  flex: 1 0 calc(50% - 20px);
  margin: 10px;
}

虽然

margin

在某些情况下表现良好，但

gap

的一般优点是：

• gap

  对于可重用组件来说更可取

• gap

  让造型变得很多
• 代码变得更干净、更容易维护
• 开箱即用的响应式设计
• 需要更少的计算：每个元素相对于彼此的位置来自父组件

注意：

gap

可用于弹性盒和网格布局