本日のプログラミング学習
HTML & CSS / 3hour
Aug / 53.5hour
Total / 78.5hour
LP模写にトライするも、ゼロイチで作成することがあまり出来なかったため、基礎固め。
インプットばっかりしてもダメ、ということはわかっているものの基礎がないと歯が立たないと実感し練習。
参考テキスト
入れ子構造のマージン相殺について
サイトの見た目を整える上で必要不可欠な「margin」。
今までの学習の中で、「隣接する要素のmarginは、値の小さい方は値の大きい方に相殺される」と知ってはいたが「入れ子構造でも相殺は起こる」と知った。
例えば、下図のように子要素の上部に30pxの余白を設定したいとする。
これを実現するために、
「子要素にmargin-top: 30px;を指定すればOK」
として下記のようなコードを記述すると・・・
こんな感じで親要素を突き抜けて、余白が設定されてしまう。
正解は
「親要素にpadding-top: 30px;を指定してあげる」