Свойство CSS gap:

существует новое gap свойство CSS для многостолбцового, flexbox, и разметки сетки, который работает в некоторых браузерах теперь! (См., Может я использовать ссылка 1 ; ссылка 2 ).

#box {
  display: flex;
  width: 100px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

На момент написания этих строк это только работает в Firefox печально.

Согласно #ChromDevSummit там является реализацией gap свойство для Flexbox, хотя в это время (14 ноября 2019) это только поддерживается в Firefox, но должно быть скоро реализовано в Chrome:

Живая Демонстрация

я обновлю свой ответ, после того как это добирается до Chrome также.