css - 创建一个 4x4 响应式正方形网格，在容器的每一侧留出 20px 的边距？

Question

<分区>

Answer 1

你可以简单地添加

section{
    margin:-1%;
    padding:20px;
}

DEMO

这样您就可以在容器的每一侧都有 20 像素的固定间距。要移除水平滚动条，您可以使用 overflow:hidden;

添加另一个容器

DEMO

html,
body {
  margin: 0;
}
.w {
  overflow: hidden;
}
section {
  margin: -1%;
  padding: 20px;
}
section div {
  background: #000;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
}

<div class="w">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>