子要素divにmarginを指定したら親要素を超えて上にはみ出た問題

つまづいたのでメモ

親要素であるdivとその中にある子要素のdiv

子要素に対してmargin: 10px;を指定すると親要素がmargin-top: 10px;になり、子要素はmargin-top: 0px;のようになった
実際の値は合っているのに見た目が上記のように…

図解するとこう

親要素になるdivを配置
この段階ではmargin-top: 0px;になってる

子要素になるdivにmarginを任意の値で指定すると…
上に隙間が空いた

解決法

調べてできた解決法

親要素にoverflow: hidden;を指定する

overflowは領域内に収まりきらなかった要素をどうするかを指定する

やったね