gapプロパティは要素間の余白を指定する比較的新しいプロパティです。
横並びにした要素の間隔をmarginやpaddingで設定することが一般的でしたが、gapを使うと簡単に余白を指定することができます。
もともとgridで使われていたプロパティですが、すでにflexboxにも対応しています。

marginやpaddingで余白を作った場合は、各要素に対して余白を指定しますが、gapは要素と要素の間に余白を作ります。
例えばmarginを用いて余白を指定した場合は、最初と最後の要素に不要な余白ができてしまいます。その場合、不要な余白を打ち消す記述が必要になりますが、その調整をしなくてよいのがgapです！
gapを使用すればCSSの記述も最小限に抑えることができます。

display:flex;を指定している親要素に記述します。
使用できる単位は px, em, rem, %などです。

column-gap
横方向の余白を指定する場合に使用します。

row-gap
縦方向の余白を指定する場合に使用します。

gap
縦・横の余白をまとめて指定する場合に使用します。
横と縦で異なる余白を指定する場合は「gap: 10px 30px;」のように記述します。ひとつ目が縦方向でふたつ目が横方向の値です。
横と縦に同じ余白を指定する場合は「gap: 20px;」のように記述します。

gapで指定できるのは余白の幅がすべて同じ場合です。個別に余白を指定することができません。
gapの余白は、要素の外側に作られます。paddingのようにbox-sizingで要素のサイズに含めることはできません。
row-gapは、親要素に高さを指定していないと「%」での指定ができません。

gap、margin、paddingには、それぞれに適した場面があります。うまく使い分けて作業効率をあげましょう。