リンクの反応範囲を親のブロック要素全体に広げよう

クリック！

HTML と CSS でリンクの反応範囲を親のブロック要素全体に広げよう！ というわけでちょっとメモ φ（．．）。

ブロック要素の中身がアンカータグ(aタグ)だけの場合なら、アンカータグに CSS で width:100%; と display:block; をしていしてやればOKです

ソースにするとこんな感じ。

<style type="text/css"> .button-box { width:400px; border:2px solid #000000; background-color:#FAF3DF; } .button-box a { display:block; width:100%; padding:10px; } </style> <div class="button-box"><a href="">クリック！</a></div>

おぉ！ 簡単。

リンクのテキストの周りにもうちょっと余白が欲しいなぁ・・・。というときは、アンカータグに CSS で padding を指定してやると、いい感じにできます。

親のブロック要素の高さが指定されている場合は、やっぱりアンカータグに padding を使って上手いこと上下の隙間を埋めるか、line-height を使ってセンタリングしてしまうか・・・。かなぁ。