余白の設定
近接の法則
近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。
適切な余白を設定することでユーザーが情報を適切にグループ分け出来るようします。
margin
marginとは要素の外側に出来る隙間の事です。
padding
paddingとは要素の内側に出来る隙間です。
言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。
marginとpaddingは共に４つの方向別に指定する事が出来ます。
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。
