【CSS】aタグの横幅が変更しない問題

ナビゲーションメニューを作成している時、

・各メニュー項目（aタグ）は、パディングを含めた領域全体がクリック可能になるように

・横幅は最低300px

と想定して以下のようなHTMLとCSSを記述しました。

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

nav a {
  padding: 30px;
  min-width: 300px;
  background-color: #f0f0f0;
  text-decoration: none;
  font-size: 50px;
}

ですが、実際は・・

・テキスト部分のみがクリック可能で、padding部分はクリックできない。

・paddingが横は反映されているが、上下に反映されていない。

・横幅のスタイルが反映されていない

問題の原因

この問題の原因は、aタグがデフォルトでインライン要素であることでした。

インライン要素は、コンテンツ（テキストなど）の幅と高さしか持たず、paddingやmarginは左右にのみ適用され、上下には適用されない特性をもっています。

そのため、クリック可能な領域がテキスト部分に限られてしまい、期待した動作になりませんでした。

解決方法

CSSを以下のように変更

nav a {
  padding: 30px;
  min-width: 300px;
  background-color: #f0f0f0;
  text-decoration: none;
  font-size: 50px;

  display: inline-block; /* ブロック要素をインライン要素に変換 */
}

nav a:hover {
  background-color: #ddd;
}

変更したことで

・横幅が300px+paddingの30pxで360pxになった

・paddingが全ての方向で30pxになり、どこでもクリック可能になった

解決方法の説明

display: block;を適用することで、aタグはブロックレベル要素になることができます。

ブロックレベル要素は、親要素の幅いっぱいに広がり、独自の高さと幅を持ち

また、上下左右のpaddingとmarginがすべて有効になります。

display: inline-block;との比較

display: inline-block; もaタグのクリック領域を広げるために使用できます。

inline-block は、インライン要素のように横並びに配置されつつ、ブロックレベル要素のように幅と高さを指定できるという特徴があります。

display: block;の使用タイミング

要素を一まとめにして、表示をはみだしたくない時。

インライン要素に高さや幅を指定したい時。

display: inline-block;の使用タイミング

要素を横並びで配置したい時。

ボタンに背景色をつけたい時　(例)headerのnavに指定する

まとめ

aタグはデフォルトでインライン要素であるため、そのままではクリック可能な領域が狭く、

ユーザーの操作に支障をきたす恐れがあるので注意してコーディングをする。

aタグ以外にもインライン要素のタグが存在しているので、CSSが反映されないなと思った時は

ボックスモデルを確認してみよう。