CSSで表示が異なってしまう

質問

下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。

画像の下のようにしたいのですが、どうすればよろしいでしょうか？

よろしくお願いします。

■ CSS

A:link{ color:#0095ff;
text-decoration: none;}
A:visited{ color:#0095ff;
text-decoration: none;}
A:hover{ color:#00efff;
text-decoration: underline;}
A:active{ color:#00efff;
text-decoration: underline;}

.style02{
padding:3px 0 0 6px;
margin-bottom: 5px;
font-size:16px;
font-weight:bold;
background-image:url(../_images/h_02.gif);
background-repeat:repeat-x;
border: 1px solid #000000;
color: #000000;
}

■ ソース

<a class="style02" href="http://www.hogehoge.com">トップページ</a>

<div class="style02">トップページ</div>

回答No.1

Taiyonoshizuku · ベストアンサー

aタグはinline要素
divタグはblock要素
この辺の違いは調べてみてね

a.style02 {
display: block;
}
を追加してあげればいいと思う。

お礼

ご回答ありがとうございます！
無事に出来ました。
inline要素 block要素勉強しておきますm(_ _)m