今まで使いドコロがなかったのが不思議なくらいですが、
要素の内側にボーダーを付けるというのを調べました。
aタグで囲った画像をマウスオーバーする際にボーダーを表示させる想定です。
■HTML
<a href="#"><img src="xxxxx.jpg" /></a>
■CSS
a {
overflow: hidden;
display: inline-block;
*display: inline; /* ie6,7 */
*zoom: 1; /* ie6,7 */
}
a:hover {
border: 3px solid #000;
}
a:hover img {
margin: -3px;
}
IE6から対応。
赤字部分はインライン表示の指定ですが、ブロック要素かつ横幅100%にならなければなんでも大丈夫です。
複数並べる場合は float でもいいし、display:block; を指定して横幅を決めた div などで囲ってもいいと思います。
aタグのサイズを指定する場合は、a:hover にボーダーを引いた分のサイズを指定しないとならないようです。
