The other way round

こんばんは ('0')/

marginの相殺が発生するのは兄弟要素間のみです。
参考記事: marginが消える？！な件を解消する方法
https://vanillaice000.blog.fc2.com/blog-entry-1105.html

そして参考記事で少し触れている通り、親にdisplayのflexが指定されている場合その子要素はmarginの相殺が起こりません。
いくつか例をあげますので感覚で理解して頂くと良いかもです。

【flex自体の兄弟】

2つのdivはそれぞれdisplay:flexが指定されている兄弟です。この場合のdiv同士の距離は [太字]10px[/太字] です。兄弟なので相殺が起こります。

【flexの中にp要素の兄弟(flexの向きはcolumn)】

<div style="display: flex; flex-flow: column;">
<p style="margin: 10px 0;">あいうえお</p>
<p style="margin: 10px 0;">かきくけこ</p>
</div>

p要素同士の距離は兄弟ですがflex子要素なので相殺が起こらず20pxです。

【flexの高さがどうなるか】

上と同じ条件で親要素の高さがどうなるか(pはdivに変更)

この場合の親(flex)の高さは140pxです。
50px + 10px + 10px + 50px + 10px + 10px = 140px
(.div1の高さ) + (.div1の上margin) + (.div1の下margin) + (.div2の高さ) + (.div2の上margin) + (.div2の下margin) = 140px

子要素で相殺が行われないためmarginも内包要素の高さとしてカウントされます。

-----
flexを使う場合はこの特徴を理解しないといけないので、ちょっと敷居が高いといえば高いかもですね (∵`)
最初に注意点としてお伝えするべきでした。ごめんなさい。

-----
div要素はhtml, body, head, 親子要素が確定している要素など 以外のほとんどの要素を入れ子できますよ。p要素は逆で入れ子できる要素が厳格に限定されて(どれも厳格ではありますがp要素はブラウザ補完が働くためミスが如実に現れる要素です)いますので、今回のようなブロック分けや装飾目的の場合は迷わずdiv要素の利用をおすすめします(p要素は『文章段落』での使用のみ、装飾用途には絶対に用いないという意識を持つのが大事です)

管理者にだけ表示を許可する