列间隙的二种设置方案 -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列间隙的二种设置方案</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    .box1 {
      background-color: darkturquoise;
      width: 50vw;
      height: 20vh;
      border: 1px solid red;
      float: left;
      margin-right: 1em;
      border-radius: 1em;
    }
    .box2 {
      background-color: wheat;
      width: calc(50vw - 1em);
      height: 20vh;
      border: 1px solid red;
      float: left;
      border-radius: 1em;
    }
    .box3 {
      background-color: darkturquoise;
      width: 50vw;
      height: 20vh;
      border: 1px solid red;
      float: left;
      margin-right: 1vw;
      border-radius: 1em;
      margin-top: 1em;
    }
    .box4 {
      background-color: wheat;
      width: calc(50vw - 1vw);
      height: 20vh;
      border: 1px solid red;
      float: left;
      border-radius: 1em;
      margin-top: 1em;
    }
  </style>
  <body>
    <div>
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
    <div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

使用百分比的话，2者距离会随着可视窗口的大小而发生变化。但是使用1em的话，二者距离不变。
二者区别效果图：