余白の設定

「余白」はデザインする上でもっとも重要な役割を果たします。

近接の法則

近接の法則とは「ゲシュタルトの法則」の１つで、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。

studyhacker.net

bulan.co

margin

marginとは要素の外側に出来る隙間の事です。

padding

paddingとは要素の内側に出来る隙間です。

言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。

marginとpaddingは共に４つの方向別に指定する事が出来ます。

margin-top
margin-bottom
margin-left
margin-right

padding-top
padding-bottom
padding-left
padding-right

また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。