CSS 如何在元素之间添加空间以填充其容器 div

在本文中，我们将介绍如何使用 CSS 在元素之间添加空间，以使它们填充其容器 div。

阅读更多：CSS 教程

使用外边距（margin）

要在元素之间添加空间，最简单的方法是使用外边距（margin）。外边距是元素周围的空白区域，通过设置外边距的大小可以实现元素之间的间距控制。

例如，如果我们有一个包含多个 div 元素的容器，我们可以通过为每个子元素设置 margin 属性来创建间距。我们可以使用 margin 属性设置上、下、左、右四个方向的外边距值。

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

.item {
  margin: 10px;
}

在上面的示例中，我们为每个元素的上、下、左、右设置了 10px 的外边距，从而创建了元素之间的空间。

除了外边距（margin），我们还可以使用内边距（padding）来为元素之间添加空间。内边距是元素内容与边框之间的区域，通过设置内边距的大小可以实现元素之间的间距控制。

与外边距类似，我们可以使用 padding 属性设置上、下、左、右四个方向的内边距值。

.item {
  padding: 10px;
}

在上面的示例中，我们为每个元素的上、下、左、右设置了 10px 的内边距，从而创建了元素之间的空间。

浮动（float）是 CSS 中常用的布局技术之一，它可以使元素脱离正常的文档流，并在其父元素中浮动。通过设置子元素的浮动样式，我们可以实现元素之间的间距控制。

.item {
  float: left;
  margin-right: 10px;
}

在上面的示例中，我们将每个元素设置为左浮动，同时为每个元素的右侧设置 10px 的外边距，从而创建了元素之间的空间。

弹性布局（Flexbox）是 CSS3 中的一种新的布局模式，可以更轻松地实现元素之间的空间控制。通过设置容器的 display 属性为 flex，并使用子元素的 flex 属性，我们可以实现元素的自动间距分配。

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

.container {
  display: flex;
  justify-content: space-between;
}

在上面的示例中，我们使用 flex 布局将容器设置为横向排列，并使用 justify-content 属性将子元素按照空白均匀分布在容器中，从而创建了元素之间的空间。

在本文中，我们介绍了几种在 CSS 中实现元素之间添加空间的方法。我们可以使用外边距（margin）或内边距（padding）设置元素之间的间距，也可以使用浮动（float）或弹性布局（Flexbox）来实现。根据实际需求选择合适的方法，可以轻松地控制元素的间距，使其填充其容器 div。