marginが親に影響してしまいます。

Question

こんばんは。

div（赤）の真ん中にp（青）を入れて、丁度縦方向の中心になるようにしたいのですが、

    <div style="height:200px; background:red;">
        <p style="height:100px; background:blue; margin-top:50px;">これをdivの中心に置きたい</p>
    </div>

このようなコードだとdivの内側でなく、外側の上にmarginができてしまいます。

positionを使えばイメージ通りにはなるのですが、margin-topを使って調節することはできないのでしょうか？

よろしくお願いします。

Answer 1

div と p はいずれもブロック要素のため、入れ子構造にするとmarginが相殺されてしまうそうです
そのため、divとpは一体となったmarginでどちらか大きい方が適用されるとのこと
（これはバグでなく仕様だそうです！）

親要素に特定のCSSを適用すると回避できるそうです
・border (marginが指定されている方向)
・padding (marginが指定されている方向)
・overflow:hidden, scroll (auto, visibleは適用されない)
・position:absolute, fixed (relative, staticは適用されない)
＃以下サイトより引用しています
CSS： marginの正しい理解

Answer 2

padding-top ではありませんか？

DEMO

<div style="height:200px; background:red; padding-top:50px;">
    <p style="height:100px; background:blue;">これをdivの中心に置きたい</p>
</div>

参考

CSS： marginの正しい理解 (CSSのmarginが難しい)｜Web Design KOJIKA17

Comments

[dialbird]

ご返答ありがとうございます！
そして返答が遅れて申し訳ありませんでした。

どうやらそのようです。まだ自分のmarginやpaddingの感覚がつかめていないのが原因でした。ありがとうございました！