通常、a要素を使ってリンクを作ると、リンク文字の存在する箇所のみが「クリック可能」な領域になります。まあ、それで困ることはないのですが、メニューっぽく構成したい場合とか、「横幅いっぱいまで全体をクリック可能にしたい」と思うこともあったりします。

この説明ではよく分からないかも知れないので、とりあえず、以下のサンプルを見て下さい。

上記の3つのリンクは、一見普通のリンクに見えます。でもマウスポインタを載せてみると、横幅いっぱいまで「クリック可能」になっていることが分かると思います。
リンク文字の右側にある空白部分をクリックしても、リンクは正しく機能します。

この装飾は、リンクを作る「a要素」に対して、displayプロパティを使ってブロック化することで実現できます。
以下のようにスタイルシートを記述します。

a {
   display: block; /* ブロック化 */
   padding: 0.3em; /* 内側の余白 */
}
a:hover {
   color: #000080; /* 文字色 */
   background-color: #ccffff; /* 背景色 */
}

displayプロパティに値「block」を指定すると、その対象がブロックレベル要素のように表示されます。
その結果、リンク部分が横幅いっぱいにまで広がり、空白部分もクリック可能になります。