html - margin 应用于所有元素的问题

Question

我有一个问题，我有一个包装 div，里面有一个 div，它包含另一个向左浮动的 div，并且有一个 margin-left: 30px; 这就是它的方式看起来像现在

但是我想要它，所以第一列和第二列之后只有边距(所以第一列将处于正常位置)

应该看起来像这样(忽略边距大小的差异，这只是一个快速图像)

我将如何实现？

HTML

<div clas="wrapper">
   <div class="container">
      <div class="box">box 1</div>
      <div class="box">box 2</div>
      <div class="box">box 3</div>
      <div class="box">box 4</div>
      <!-- etc... -->
   </div>
</div>

CSS

.wrapper {
  width: 1280px;
  margin: 0 auto;
}

.container {
  overflow: hidden;
}

.box {
  float: left;
  margin-left: 30px;
}

Answer 1

好吧，它实际上并没有删除边距，但您可以对容器应用负边距:

.container {
  overflow: hidden;
  margin-left: -30px;
}

或者使用 position: relative 来达到同样的目的:

.container {
  overflow: hidden;
  position: relative;
  left: -30px;
}