リンクの反応範囲の拡張

リンクをボタンスイッチのように表示させることができます


普通は文字があるところしかリンクが反応しません。
(カーソルを枠内に移動させてみてください。何も反応しないはずです。)
〔例〕 ↓上のボックスのCSS↓
しかし、
a {
display: block; 
を入れることによって、枠内すべてが反応するようになります。
(カーソルを枠内に移動させると背景の色が変わります。)
〔例〕
かきくけこ
↓上のボックスのCSS↓

高さは、heightとpadding-topとpadding-bottomで変えます。
heightだけでも高さの指定は出来ますが、それだけだと内容がボックスの上部に表示されてしまいます。
中央に内容を表示したい場合は、paddingで上下の高さを同じにしてください。

heightで高さの指定をしているので、文章が上部に表示されています
幅はwidthで変えられます
(例) padding-topを40px、padding-bottomを40px、 widthを400pxに指定した例
↓上のボックスのCSS↓
カーソルをリンク上に乗せたときに背景色を変えるには
#link a:hover{
background: #000000;}
というように、 a:hover{を加えると背景色が変化します。
→→→→練習問題