ナビゲーションメニューのメニュー項目の余白について整理したいと思い記事にしました。
marginとpaddingの使い分けについて説明します。

基本となるHTMLとCSS

基本となるHTMLとCSSは、以下の通りです。
Flexboxを使用してナビゲーションメニューを作成しました。

HTML

<ul id="main-nav">
    <li><a href="#">項目０１</a></li>
    <li><a href="#">項目０２</a></li>
    <li><a href="#">項目０３</a></li>
    <li><a href="#">項目０４</a></li>
</ul>

CSS

#main-nav {
    width: 100%;
    margin: 0 auto;
    list-style: none;
    background: #e0e0e0;
    display: flex;
    justify-content: center;
}
#main-nav li {
    font-size: 18px;
    background: #0ff; /* 水色 */
}
#main-nav li a {
    color: #000;
    text-decoration: none;
    background: #0f0; /* 緑色 */
    border: 1px solid #000000;
    display: block;
}
#main-nav li a:hover {
    background: #ffffff;
}

li の背景色を水色、li a の背景色を緑色に設定して枠内の大きさを確認できる様にしました。

marginのみにセット

li に margin をセット

main-nav li の margin に左右10pxを設定して、メニュー項目とメニュー項目間の余白ができました。
main-nav li a の方は、余白に関する設定はしていません。

#main-nav li {
    margin: 0 10px;
}
#main-nav li a {
    何も設定しない
}

メニュー項目間の空白はできましたが、各メニュー項目の文字に隙間がなくボタンとしては使いにくいです。

li a に margin をセット

今度は、main-nav li に余白に関する設定はしていません。
main-nav li a に margin 左右10pxを設定してみました。

#main-nav li {
    何も設定しない
}
#main-nav li a {
    margin: 0 10px;
}

メニュー項目の左右に余白ができましたが、見た目が main-nav li の margin を設定した時と同じになりました。
この場合は li a には、margin は必要ないです。

padding のみにセット

li に padding をセット

main-nav li の padding に左右10pxを設定して、メニュー項目とメニュー項目間の余白をができます。
main-nav li a の方は、余白に関する設定はしていません。

#main-nav li {
    padding: 0 10px;
}
#main-nav li a {
    何も設定しない
}

main-nav li a に margin のみに設定したものと同じ結果になりました。
この場合は li には、padding は必要ないです。

li a に padding をセット

main-nav li の方は、余白に関する設定はしていません。
main-nav li a の padding に左右10pxを設定して、項目名の左右に余白ができて有効範囲が増えました。

#main-nav li {
    何も設定しない
}
#main-nav li a {
    padding: 0 10px;
}

メニュー項目間の余白はありませんが、メニュー項目の押せる範囲が広がりました。

margin と padding をセット

li に margin、li a に padding をセット

li に padding は必要なく、li a に margin は必要ないため、
main-nav li に margin のみ、main-nav li a に padding をのみを設定します。

#main-nav li {
    margin: 0 10px;
}
#main-nav li a {
    padding: 8px 10px;
}

main-nav li の margin は、メニュー項目間の余白を作ります。
main-nav li a の padding は、各メニュー項目の内側に余白を作ってクリックしやすくなります。

Flexboxならgapがおすすめ

main-nav にgap を設定することで li に margin の設定は無くなります。

#main-nav {
    gap: 20px;
}
#main-nav li a {
    padding: 8px 10px;
}

gap を使えば marginで設定したものと同じに出来ます。