スポンサードリンク

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

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

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

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

おぉ! 簡単。

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

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

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク