
p要素の終了タグを省略しているときに、p要素に指定したマージンが無視されることがある。
<style type="text/css">
div.header {
background:red;
padding:0px;
margin:0px;
}
.body {
padding:0px;
margin:0px;
background:orange;
}
div.footer {
padding:0px;
margin:0px;
background:olive;
}
</style>
<div class="header">↓隙間が出来ます。</div>
<div class="body"><p class="body">↑隙間がイヤです↓</div>
<div class="footer">↑隙間が出来ます。</div>
↑隙間がイヤです↓
発生条件がわかりません。
Mozilla 1.0RC3 Win32
パディングとマージンを同時にゼロにするとボックス間に隙間が出来てしまいます。
以下実例
<STYLE type="text/css">
DIV.header{
background:red;
padding:0px;
margin:0px;
}
DIV.body{
padding:0px
margin:0px;
background:orange;
}
DIV.footer{
padding:0px;
margin:0px;
background:olive;
}
</STYLE>
<BODY>
<DIV class="header">↓隙間が出来ます。</DIV>
<DIV class="body"><P>↑隙間がイヤです↓</DIV>
<DIV class="footer">↑隙間が出来ます。</DIV>
</BODY>
div要素の中身に直接(P要素の外に)なんか書いてやると大丈夫なようです。
366氏のサイトにないので書いてみましたが、ガイシュツだったらゴメンナサイ。
今確認してみましたが、P{margin:0px}でも同じ結果です。
IE6では隙間がないのですがこっちが正しいのではないでしょうか?