marginの使い方

Question

前提・実現したいこと

marginを使ってナビゲーションの各項目の周りに白い線がある様に
表現したいと考えています。
環境：VSCodeで記述→Chromeで実行

発生している問題・エラーメッセージ

上下を区切る部分に白い線が表示されません。

該当のソースコード

  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">お知らせ</a></li>
      <li><a href="#">製品情報</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>

nav ul{
    display :grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:32px 32px; 
    margin: 36px 2px 2px;
    padding: 0;
 }

nav li, nav a{
    display: block;
}

nav a{
    text-decoration: none;
    font-size: 0.9rem;
    background: #f3f3f3;
    padding: 0.4rem 0;
    margin: 2px;
}

試したこと

CSSコードにて下記の様にliに対して指示するとやりたい事が出来るのですが、
なぜ<a>だと出来なのかわかりません。

nav li{
background: #f3f3f3;
padding: 0.4rem 0;
margin: 2px;
}

Answer 1

CSSコードにて下記の様にliに対して指示するとやりたい事が出来るのですが、

なぜ<a>だと出来なのかわかりません。

aタグはインライン要素なのでmarginとpaddingは効きません。

HTML (Hypertext Markup Language) の要素は従来、「ブロックレベル」要素と「インライン」要素に分類されていました。インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。この記事では、 HTML のインライン要素と、 ブロックレベル要素との違いについて説明します。

インライン要素|MDN

ここにあるブロック要素にしてみるとmarginとpaddingを指定することができます。
ブロック要素にするには、最初にdisplayプロパティをblockにする必要があります。

nav a {
  display: block;
  background: #f3f3f3;
  padding: 0.4rem 0;
  margin: 2px;
}

Comments

[kaccho]

回答ありがとうございます。
試したことに明記してませんでしたが、
下記コードで既にブロック要素にしております。
（ブロック要素になっているのはディベロッパーツールで確認済）
nav li, nav a{
display: block;
}
他に思い当たる要因ありませんでしょうか。

[kai0310]

>marginを使ってナビゲーションの各項目の周りに白い線がある様に
表現したいと考えています。
余白ではなく白線をmarginで表現したいのでしょうか？

[kaccho]

表現が誤ってました。すみません。
余白を表現したいと考えております。

[kai0310]

余白は空いていると思うのですが。
https://codepen.io/k011510/pen/dyYJavX