如何设置长度以设置 CSS 中的列之间的间隙？

在网页设计中，有时需要将内容水平排列，而每个元素的宽度又不能确定，这时候就需要使用列布局。但是，如果不设置列之间的间隙，就会让网页显得杂乱无序。本文将介绍如何用 CSS 来设置长度以设置列之间的间隙。

1. 使用margin

使用margin是最简单的方法。可以为每一列设置一个固定的左右外边距。比如，如果要设置两列之间的距离为20像素，可以这样做：

.column {
  width: 50%;
  margin-left: 10px;
  margin-right: 10px;
  float: left;
}

这里的50%是为了让每列都占据一半的宽度。

2. 使用padding

使用padding也可以实现列之间的间隔效果。这样做的好处是可以避免出现父元素宽度不够的情况，但缺点是可能会使内容溢出。

.column {
  width: calc(50% - 20px);
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

这里用calc()计算了列的宽度，因为要减去左右padding的宽度。

3. 使用border

使用border同样可以实现列之间的间隔效果。这样做的好处是可以让每一列的宽度都一样，但缺点是可能会有多余的边框出现。

.column {
  width: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  float: left;
}

这里用了透明色的边框来占据宽度，并设置了左右边框。

以上三种方法都可以实现列之间的间隔效果，具体应该根据实际情况选择。当然，也可以使用其他方法实现，如flexbox等。

参考资料

• Spacing Between Columns
• Creating Gaps Between Images with Floats and Negative Margins
• Fighting the Space Between Inline Block Elements