リンクの反応範囲を親のブロック要素全体に広げよう
HTML と CSS でリンクの反応範囲を親のブロック要素全体に広げよう! というわけでちょっとメモ φ(..)。
ブロック要素の中身がアンカータグ(aタグ)だけの場合なら、アンカータグに CSS で width:100%; と display:block; をしていしてやればOKです
ソースにするとこんな感じ。
おぉ! 簡単。
リンクのテキストの周りにもうちょっと余白が欲しいなぁ・・・。というときは、アンカータグに CSS で padding を指定してやると、いい感じにできます。
親のブロック要素の高さが指定されている場合は、やっぱりアンカータグに padding を使って上手いこと上下の隙間を埋めるか、line-height を使ってセンタリングしてしまうか・・・。かなぁ。