「余白」はデザインする上でもっとも重要な役割を果たします。
余白の設定
CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。
margin
marginとは要素の外側に出来る隙間の事です。
padding
paddingとは要素の内側に出来る隙間です。
言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。
marginとpaddingは共に４つの方向別に指定する事が出来ます。
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。
