CSS 让两个CSS元素填满容器，并且并排显示，并使用外边距

在本文中，我们将介绍如何使用CSS让两个元素填满容器，并且并排显示，同时设置它们之间的外边距。

阅读更多：CSS 教程

使用盒子模型实现填充容器

盒子模型是CSS中的一种布局方式，通过设置元素的宽度、高度和边距来控制元素在页面中的位置和大小。在本例中，我们将使用盒子模型来实现两个元素填满容器并并排显示。

首先，我们需要一个容器元素来包含这两个元素。我们可以使用div元素作为容器，给它一个类名来指定样式。

<div class="container">
  <!-- 这里放置要填充的两个元素 -->
</div>

接下来，我们需要为容器设置样式，并让它以行内块的方式显示：

.container {
  display: inline-block;
  width: 100%;
  height: 100px; /* 设置容器的高度，根据需要调整 */
}

然后，我们可以在容器中放置两个要填充的元素。这两个元素可以是任何HTML元素，例如div、span或者其他。

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
</div>

在CSS中为这两个元素设置样式，并使它们填充容器并并排显示：

.element {
  display: inline-block;
  width: calc(50% - 10px); /* 通过计算宽度来设置两个元素的大小，减去外边距的宽度 */
  height: 100%;
  margin: 5px; /* 为了实现元素之间的外边距，根据需要调整 */
  background-color: blue; /* 为了便于演示，设置不同的背景颜色 */
}

在这个示例中，我们设置了两个元素的宽度为容器宽度的50%，并且减去外边距的宽度。同时，我们为它们设置了相同的外边距，以便在它们之间留出间距。