cssのgapとは

gapとは（公式ドキュメントより直接引用）

gap は CSS の一括指定プロパティで、行や列の間のすき間（溝）を設定します。このプロパティは段組み、フレックス、グリッドコンテナーに適用します。

どういうこと？

あるグループに含まれている要素の間を設定できる。

例

HTML

<div class="employee">
    <span id="Sato">佐藤</span>
    <span id="Suzuki">鈴木</span>
    <span id="Tanaka">田中</span>
</div>

CSS

.employee{
    display:flex;
    gap:50px;
}

※gapは一部のdisplayでは使用できないため、明示的にflexを指定した。

結果（イメージ）

佐藤　　　鈴木　　　田中

↑各人の間が50pxずつになります。（上記はあくまでイメージのため実際に50pxな訳ではありません）

marginやpaddingじゃダメなの？

それでもいい時はそれでもいい。ただし、要素の有無が時と場合によって変わる場合には、gapの方が適している可能性があります。

例

#Sato{
    margin:50px;
}

#Tanaka{
    margin:50px;
}

各要素についてmargin:50px;で設定しており、「鈴木」を表示しない場合、Satoに定義された50pxとTanakaに定義された50pxが合計され100pxの余白ができてしまう。

つまり

ある親要素の中にある子要素の数が動的に変わり、かつ子要素間の余白の幅を一定にしたいときに便利。