Durante mucho tiempo se utilizó el margin para ordenar la separación entre elementos. Desde la llegada de flex y luego grid, esto se fue actualizando hasta llegar a la propiedad gap, que permite establecer el tamaño de la separación entre elementos. Su estructura es la siguiente

gap: 10px 20px

La distancia entre filas

La distancia entre columnas

A su vez, gap tiene un shorthand por si queremos que la distancia entre filas sea del mismo tamaño:

gap:10px

La distancia entre filas y entre columnas

Ejemplo: tengo dos divs que de fondo tienen una imagen. Quiero que haya entre ellos una separación de 20px y estan ubicados en forma de fila

.main{
  display:flex;
  flex-direction:row;
  gap:20px;
}

Asi se verán

Notá el espacio en el medio de ambos, eso es el gap.