DAY 27 HTML & CSS 自主練 【ウェブカツ】

本日のプログラミング学習

HTML & CSS / 3hour

Aug / 53.5hour

Total / 78.5hour

 

LP模写にトライするも、ゼロイチで作成することがあまり出来なかったため、基礎固め。

インプットばっかりしてもダメ、ということはわかっているものの基礎がないと歯が立たないと実感し練習。

 

参考テキスト

入れ子構造のマージン相殺について

サイトの見た目を整える上で必要不可欠な「margin」。

今までの学習の中で、「隣接する要素のmarginは、値の小さい方は値の大きい方に相殺される」と知ってはいたが「入れ子構造でも相殺は起こる」と知った。

 

例えば、下図のように子要素の上部に30pxの余白を設定したいとする。

margin_offset_true

 

 

これを実現するために、

「子要素にmargin-top: 30px;を指定すればOK」

として下記のようなコードを記述すると・・・

 

margin_offset_false

 

margin_offset_false2

こんな感じで親要素を突き抜けて、余白が設定されてしまう。

 

正解は

「親要素にpadding-top: 30px;を指定してあげる」

 

margin_offset_true2

 

 

 

 

 

 

 

 

最新情報をチェックしよう!