margin-topが動かない

Question

前提・実現したいこと

HTML、CSSを学習し始めたものです。
色々なサイトを見て理解できない点があります。以下のようなhtmlとcssでclass="p-1"に対してmarginのtopを設定するとpの要素がdivと一緒に下に移動してしまうということです。

pに対してmarginを適用すると、divのバックグラウンドの中でpが下に下がらないのか、思っております。

class="p-1"に対してinline-blockを適用する、
class="div-1"をposition:relative、class="p-1"をposition:absoluteにするとmargin-topが取れることは確認しています。

またpの要素を下段にコピーすると上のpを基準に下のpはmargin-topが取れることも確認しました。

div直下の、pやdivは親要素に対してmarginは効かないのでしょうか？
よろしくお願いします。

該当のソースコード

html側

    <div class="div-1">
        <p class="p-1">ここはpです</p>
    </div>

CSS側

body {
height: 100%;
font-family: sans-serif;
font-size: 100%;
}
.div-1 {
background: aquamarine;
width: 80%;
height: 300px;
margin: 30px auto;
}

.p-1 {
background: blueviolet;
width: 80%;
height: 150px;
margin: 20px auto;
}

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

marginの相殺が起きています。

ここがわかりやすいと思います。

margin-topが親要素に指定し、インフローの最初の子要素にも指定した場合、それらのマージンは相殺されます。

Comments

[snow_drop]

理解できました！
早速のご回答ありがとうございました。

[kyoya0819]

解決されたようで何よりです。