p要素を入れたボックスの高さ。

div要素に下のCSSを適用して、そのなかに<p>で囲ったテキストを入れています。
padding: 0 25px;
background: transparent url(../image/web/bm_narrow.gif) repeat-y;

p要素には、デフォルトで上下にマージンがついていると思うのですが
ボックスの高さがp要素のマージン部分を反映せず、背景画像が
p要素のマージン部分には表示されないという状況です。

ボックス部分のpaddingをpadding: 1px 25px;とすると
きちんと表示されるようになったので、ほぼ解決しているのですが

このような現象は正常なのか、バグなのか、知りたいです。よろしくお願いします。

No.1 ベストアンサー 回答者： ratoa 回答日時： 2006/10/13 12:50

p要素のマージン部分には表示されないというのは、p要素本来あるべき縦方向のマージンが認識されていないのがおかしいということでしょうか。

だとすれば、それはマージンが相殺しているだけなので正しい表示です。

この場合、divにpaddingもborderも指定されてないと、中身のp要素のマージンとdiv要素のマージンが相殺されて、ひとつになっている状態になります。
paddingを1px付け足す事で解決するのは、それによって相殺状態が解除されるからです。

参考URL：http://adp.daa.jp/archives/000574.html

この回答へのお礼

ご説明＆参考URLありがとうございます。
よくわかりました。この場合p要素とdiv要素のマージンが相殺されてひとつになった結果、div要素の方にmargin:25px;が反映されるようになったのですね。

お礼日時：2006/10/13 14:06