marginを指定した見出し要素の後に段落要素をつけるとmarginが変なことになります。

質問

CSSとHTMLでホームページを作っています。
ですがなぜかIEの表示のみ、妙な表示になります。
<h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します（IEのみ）。
この対策法を教えていただけないでしょうか？
ソース（一部を抜粋、少し書き換え）は
HTMLは4.01 Traditional（DTDあり）で、

<h3 class="st">ABOUT</h3>
<p>
ここは×××の管理する、・・・・サイトです。<br>
●●はメインからどうぞ。
</p>
<h3 class="st">Update Log</h3>
<p>
2009/03/24　ああああああああ<br>
2009/03/23　あああああああああ<br>
ああ<br>
</p>

CSSは
h3.st{color:#727171;background-color:#ffffff;font-size:95%;text-align:center;margin:0px 25px;padding:3px 0px;border-bottom:#87ccd4 1px dotted}
p{text-align:left;margin:0px;padding:3px 32px;line-height:200%;font-size:90%;}

です。
CSS内で、CLASS要素を指定した他のpタグにfloatを指定しましたが、それが影響しているかと思って消してみても変わりません。
どうかよろしくお願いします。

回答No.1

abril · ベストアンサー

> <h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します（IEのみ）。

サンプルのソースを再現した限りでは、IEでもIE以外でも結果は同じ様にしか表示されず、「見出しのマージンが後の段落に影響」という現象は確認されませんでしたが…？

具体的に、質問者様の仰る不具合とはどの様なものでしょうか？「見出しのマージン」はこの場合、上下は0・左右は25pxづつであり、「段落」のマージンは上下左右共に0、ですよね。pに背景色を一時的に塗るなどしてpのレンダリング領域を確認しましたが、いずれの環境でもちゃんとCSSでの指定通りにマージンは0になっている様ですよ？
勿論、pには元々パディングで上下に3px・左右に32pxづつ設定されていますからボックスの内側の余白はその通りにありますし、line-heightも200%と大変広目なので結果としてテキストがちょうど一行空きぐらいの間隔で改行される事にはなりますが、これはIEに限った事ではない正しい仕様ですし…

IEと他でどの様な違いが起きているのかが確認できる様な実際の不具合が起きているソースを提供して下さい。

補足

すみません、解決いたしました。
不具合が起こっていたのは二個目の段落のマージンだったのですが、なぜかh3にwidthを指定したらなんとかなりました。
ご回答ありがとうございました。