margin

marginは要素の外側に余白を付けるためのプロパティです。
余白を付ける方向をプロパティ名に、付けたい余白の大きさをプロパティ値で設定していきます
値は実際につけた一余白の大きさを単位付きで設定してあげればOK
自動算出してくれる「auto」やマイナスの値を設定することもできる

marginの注意点

marginを使う上で注意しないといけないものにmarginの相殺があります。
相殺はmargin同士が重なった場合に起こります。
相殺が起こった場合は大きいほうが優先され小さいほうのmarginがなかったことにされますので注意しましょう。

padding

paddingは要素の内側に対して余白の設定を行うプロパティです。
使い方はmarginとほぼ同じですが設定できる値に使えないものがあるので注意しましょう。

paddingの注意点

幅や高さを設定した要素に対してpaddingを設定すると、要素に設定した幅や高さの値が無視されてしまいます。
これはpaddingが設定した幅や高さの内側から要素押し広げる形でくっついていく仕様によるものなので注意をしてください。
これを回避するには「box-sizing:border-box;」を使って設定した要素内に余白を含める設定にしましょう。

paddingのプロパティ値について

marginとは違いプロパティ値には

• auto
• マイナスの値

この二つは使用できないので注意してください

ショートハンドプロパティ

一つ一つ方向を設定していくのはめんどくさいですよね。
なのであらかじめ一つのプロパティ名で4辺の値が設定できるようになっています。
さらに値の書き方によっては複雑な設定もできますので覚えておきましょう

上のコードのようにmarginやpaddingにまとめて設定できますので覚えておきましょう