margin,paddingなどで困ったことがあります。

質問

現在、HPを作っています。
そこで相談なのですが、FirefoxやOpera、IE8、IE8のIE7互換モードなどで表示の違いがありました。
その部分のソースはこちらです
<div class="menu">
<span><h4>Link</h4></span>
<p><a href="javascript:void(0)">リンク1</a></p>
<p><a href="javascript:void(0)">リンク2</a></p>
</div>
そしてCSSのソース（一部）です。
div.menu{
font-size: 10pt;
color: #000000;
font-weight: bold;
margin: 3px;
padding: 4px;
border: 4px groove #000000;
width: 178px;
background-color: #eeeeee;
}
div.menu span{
display: block;
text-align: center;
}
div.menu h4{
color: #000000;
font-size: 26px;
padding-bottom: 10px;
padding-top: 10px;
}
このCSSのソースのどこを修正すれば、正しい表示になるでしょうか？
表示は送付画像のような表示です。

回答No.1

no4nejp

こんばんは。
どうすれば正しくなるのかとありますが、
画像の左右どちらを意図しているのかが分からないのでその点について解答することが出来ません。

また、cssでコーディングを行う時、今回のような問題を極力避けるために、スタイルの最初に
*{
margin: 0;
padding: 0;
}
と記載するのがベターです。
（色々な方法がありますが、初めはこの方法で良いと思います）
こうすることで、ブラウザで異なるmargin, paddingの設定を完全にリセットできます。

今回の問題では上記のリセットを行い、span要素やh4要素、a要素にそれぞれ細かくスタイル指定するのが良いです。

蛇足ですが、<span><h4>foobarbaz</h4></span>という記述は、たとえspan要素をdisplay: block;していても良くないです。
この場合は<div><h4>foobarbaz</h4></div>とするのが良いでしょう。

お礼

ご回答ありがとうございました。

補足

* {
margin: 0;
padding: 0;
}
と一応、CSSに書き込んであります。
あと、『正しい表示になるでしょうか？』と、発言しましたが、『ほぼ同じ表示になるでしょうか？』に訂正させていただきます。
あと、画像が、切れているように見えますが、別のタブで、直接表示すると表示できるみたいです。