CSSの基本的なことが分かったところで、いよいよ具体的なCSSの使い方を説明して行くよ！
お願いします！！
今回はmarginとpaddingについてだよ！かなり使用頻度が高く、重要な部分だからね。意外にその違いをあいまいなままにしている人も多いけど、Webサイトの制作で重要となる「余白」と大いに関わりのある部分だから、しっかりと理解して行ってね！
なかなか難しそうだね。。でも重要な部分だからしっかりと行っていこう！！
そうだよ！頑張ってね！！
ボックスの構造について
marginを理解しよう
marginプロパティの基本的な使用方法の説明になります！
margin: autoに関しての説明になります。これも使用頻度が高いので、しっかりと使えるようにしていきましょう！！
インライン要素にはmarginの上下は効きません！その対処方法は・・・
paddingを理解しよう
paddingプロパティの基本的な使用方法が説明されています！
インライン要素におけるpaddingの効果
インライン要素に対しては、先に説明のあるブロック要素に対してのpaddingの表示のされ方とは違います！paddingを使用した時に思うような表示にならない時には、paddingを設定したhtmlタグがインラインかブロックか確認しよう！！
marginとpadding、borderのボックス構造
図形を利用してわかりやすく、marginとpadding、そしてborderの範囲が説明されています。ここをしっかりと理解しておくことが今後のコーディングに大きくかかわるのでしっかりと理解していきましょう！！
box-sizingプロパティの効果
box-sizingはpaddingやborderを設定した時に、同時に使用することも多々あるプロパティです。ボックスのサイズをどこまで含めるかを設定するプロパティで、後で説明する横並びのレイアウトを行うときなど、レイアウト崩れを起こす時にはbox-sizingの設定が原因の事がありますので、しっかりと理解していきましょう！！
まとめ
- marginやpadding、borderがボックス（コンテンツ）のどの部分を調整するプロパティなのかを理解する
- marginプロパティのautoの使い方を理解する
- インライン要素へのmarginとpadding
- box-sizingでボックス（コンテンツ）サイズをどこまで含めるか設定する事を覚える
Web制作において「余白を制する者は全てを制す」っていうと言いすぎかなｗｗでもそのぐらい余白は重要で、そのためのプロパティが今回説明したmarginやpadding、border、そしてbox-sizingになるから、しっかりと理解する事！！いいね！！！
わかった！！頑張って「Webを制する」ぞ！！！！
コメント