在第1个和第4个25％内联块之间需要空格

Question

如何在一行中的第一个和最后一个25％内嵌块div之间设置空格？

据我所知，使用{justify-content：space-between;}命令在flex中很容易，但是我想找到内联块元素的解决方案。

谢谢！

* {
  box-sizing: border-box;
}
body {
  display: block;
  margin: 0 auto;
}
.wrap {
  display: block;
  margin: 0 auto;
  max-width: 1000px;
  border: 1px solid;
  text-align: center;
  font-size: 0;
}
.wrap > div {
  display: inline-block;
  width: 25%;
  height: 150px;
  font-size: 100px;
  border: 1px solid;
  vertical-align: top;
}

    <div class="wrap">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

Answer 1

UPD 解决方案-“计算”功能可计算元素之间的边距。感谢Andrey Fedorov。请参见下面的代码。

* {
  box-sizing: border-box;
}

body {
  display: block;
  margin: 0 auto;
}

.wrap {
  display: block;
  margin: 0 auto;
  max-width: 1000px;
  border: 1px solid;
  text-align: center;
  font-size: 0;
}

:root {
  --marginSize: 20px;
}

.wrap > div {
  display: inline-block;
  width: calc(25% - var(--marginSize) * 3 / 4);
  height: 150px;
  font-size: 100px;
  border: 1px solid;
  vertical-align: top;
}

.wrap > div:not(:last-child) {
  margin-right: var(--marginSize);
}

    <div class="wrap">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>