読者です 読者をやめる 読者になる 読者になる

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

つまづいたのでメモ

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

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

図解するとこう

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

f:id:seto_abe:20161206150231p:plain

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

f:id:seto_abe:20161206150609p:plain

解決法

調べてできた解決法

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

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

f:id:seto_abe:20161206153256p:plain

やったね