リンクの下線と文字の間隔を開けるには

質問

ブログでやりたいんですが、教えてください。調べてみると、padding-bottom: px らしいんですけど、うまくいきません。リンクの部分は次のような記述（ライブドア）になっているんですが、どう書き換えればいいのでしょうか。

a{color:#666;text-decoration:underline;}
a:link{color:#666;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{background-color:orange;text-decoration:none;}

よろしくおねがいします

回答No.1

k_jill · ベストアンサー

text-decorationだと多分下線の位置を細かく弄れないと思います。この下線装飾を消して、ボックスの枠線で擬似的な下線を作るのがpaddingを使う方法だと思います。
　という事でやや無理矢理っぽいですが…。

a:link {
text-decoration : none;
margin : 0px;
padding : 0px;
padding-bottom : 2px;
border-bottom-style : solid;
border-bottom-width : 1px;
}
a:visited{
text-decoration : none;
margin : 0px;
padding : 0px;
padding-bottom : 2px;
border-bottom-style : solid;
border-bottom-width : 1px;
}
a:hover {
text-decoration : none;
margin : 0px;
padding : 0px;
padding-bottom : 2px;
border-bottom-style : solid;
border-bottom-width : 1px;
}
a:active{
text-decoration : none;
margin : 0px;
padding : 0px;
padding-bottom : 2px;
border-bottom-style : solid;
border-bottom-width : 1px;
}

　下線と文字の間隔は padding-bottom で変更して下さい。線の太さは border-bottom-width でどうぞ。
　不細工な指定ですが多分此れで大丈夫なはず…。

お礼

すごい！できました！
なるほどボックスの枠線を利用するしかなかったんですね。
ありがとうございました！