html - すべての要素にマージンが適用される問題

Question

問題が発生しています。ラッパー div があり、その中に div があり、その中に別の div が含まれています。この div には、左に浮かんでいる別の div があり、margin-left: 30px;現在は次のようになっています。

ただし、最初と2番目の列の後に余白があるようにしたいです（したがって、最初の列は通常の位置になります）

このように見えるはずです（余白サイズの違いは無視してください。これは簡単なイメージです）

どうすればそれを達成できますか？

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;
}