border-style:solidで文字がずれる

URL用のテキストに枠線をつけました。通常はポインタを当てると下線がでると思いますが、最初に

a{
text-decoretion: none;
}

でもって下線を消しました。

次に
a hover{
border-style: solid;
padding: 5px;
}

によって枠線を作りましたところ、ポインタを当てると枠線はでるのですが、<li>のテキストが５pxほどずれてしまいます。

cssで

header ul li{
float: left;
padding: 0 70px 0 0;
}

こんな感じになら設定しており、float: left;で左詰めにしているせいでポインタを当てて枠線をが出た時に枠線分だけ右にずれるのが原因ではないかななどと思っていますが、兎にも角にも分かる方がいらっしゃいましたらすみませんが教えてください。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/10/29 13:48

a要素は行内(インライン)要素です。

この行内要素ブロック要素の区別はHTML/CSSで重要なので覚えておくこと。
HTML4.01
　7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
CSS2.1
　9.2.1 ブロックレベル要素とブロックボックス( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　9.2.2インラインレベル要素とインラインボックス( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

※ a要素をボックスにする。(display:inline-block)
※ ボックスモデルの寸法はpadding辺の内側になる。
　　hover時にborderやpaddingを指定するとずれるのであらかじめ透明色(transparent)で指定しておく。

結果・・・
header ul{
text-align:center;/* 中央配置floatは使わない */
width:100%;/* 適当な幅に */
margin:0 auto;padding:0;
}
header ul li{
list-style:none;
display:inline-block;
position:relative;
width:20%;/* 適当な幅に */
padding:5px;
}
header ul li+li{
margin-left:70px;/* 二つ目以降は70px左をあける */
}
header ul li a{
text-decoration:none;
display:block;
width:100%;height:100%;/* 直近のstatic以外の親ブロック(li)に対して */
border-bottom:solid 2px transparent;
}
header ul li a:hover{
border-color:red;
}

この回答への補足

具体例込みで大変ありがとうございます！明日チャレンジします！

補足日時：2014/10/31 00:23

この回答へのお礼

詳しくありがとうございます！おかげで解決いたしました！

お礼日時：2014/11/02 19:25

No.1 回答者： t_ohta 回答日時： 2014/10/29 12:51

a hover に padding: 5px を指定しているので5pxずれるのでしょう。

この回答へのお礼

ありがとうございます！

お礼日時：2014/11/02 19:25