html - 影響を与えるパディングマージン

Question

htmlと を使用して作成したデザインがcssあり、混乱する問題に遭遇しました。

私のdivタグを囲むpタグには のpaddingがあり0 20px;ます。タグは、pデフォルト（ によるfont-size）または に記載されていcssます。

問題:タグの は、margin少なくとも周囲にがある場合を除き、表示されません。ppadding1pxdiv

HTML

<div>
    <p>Why hello there Sir!</p>
</div>

CSS

div {
    padding:0 20px;
    /* padding:1px 20px; */
    /* fixes the issue but adds an extra pixel, which I don't want */
    background:#ccc;
}
p {
    margin:20px 0;
}

これが実際の例です（問題を修正するボタン付き）：http://jsfiddle.net/hrRNu/

パディングなしでこれが機能することを本当に望んでいます。何か案は？

Answer 1

これは「マージンの崩壊」と呼ばれるものであり、正常な動作です。詳細はこちら: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

p – 自然なブロック レベル要素 – を設定するinline-blockことは、実際には問題の適切な "修正" ではありません。

代わりに、マージンを div 自体に設定できます。

Answer 2

これを試して

div {
    background:#ccc;
    padding:0 20px;
}
p {
    display: inline-block;
    margin:20px 0;
}