marginとpaddingを理解し、box-sizingを使いこなそう

Web制作
ブッ君
ブッ君

CSSの基本的なことが分かったところで、いよいよ具体的なCSSの使い方を説明して行くよ!

マー君
マー君

お願いします!!

ブッ君
ブッ君

今回はmarginとpaddingについてだよ!かなり使用頻度が高く、重要な部分だからね。意外にその違いをあいまいなままにしている人も多いけど、Webサイトの制作で重要となる「余白」と大いに関わりのある部分だから、しっかりと理解して行ってね!

マー君
マー君

なかなか難しそうだね。。でも重要な部分だからしっかりと行っていこう!!

ブッ君
ブッ君

そうだよ!頑張ってね!!

ボックスの構造について

marginを理解しよう

インライン要素にはmarginの上下は効きません!その対処方法は・・・

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制作において「余白を制する者は全てを制す」っていうと言いすぎかなwwでもそのぐらい余白は重要で、そのためのプロパティが今回説明したmarginやpadding、border、そしてbox-sizingになるから、しっかりと理解する事!!いいね!!!

マー君
マー君

わかった!!頑張って「Webを制する」ぞ!!!!

コメント

タイトルとURLをコピーしました