marginとpaddingのあれこれ

一番最初に色々とこんがらがるmarigin とpadding。
今だにどっちを使った方が良いのか迷うこともある。
結構奥が深い。知れば知るほど奥が深い。（って言うか全部奥が深いけど。）

どちらも余白をつけるために使用するcss
使い分けが慣れるまでややこしい。
しかもわかったつもりでいるとトラップにはまりやすい。

・要素の内側の余白を広げる時はpadding
・要素同士を離すときはmargin

cssでの記述方法

・余白は上下左右につけられる　
1. padding-top（上の内側余白）
2. padding-right（右の内側余白）
3. padding-bottom（下の内側余白）
4. padding-left（左の内側余白）

1. margin-top（上の外側余白）
2. margin-right（右の外側余白）
3. margin-bottom（下の外側余白）
4. margin-left（左の外側余白）

ショートハンドでまとめる

・上下左右同じ（全方向）
padding:10px / margin:10px
・上下左右（全部数字がバラバラの時）
padding:10px 15px 20px 30px / margin:10px 15px 20px 30px
・上　左右　下
padding:10px 15px 20px / margin:10px 15px 20px
・上下　左右
padding:10px 15px / margin:10px 15px

それでも迷ったときはどこからどこまでを１つのボックスと見なすか。
１つのボックスにしたければpadding。
あとここmarginだなと思っても、background-colorが付いてるときはpaddingを使用する。

magrinの相殺

・要素が上下に並んでいるとき
上下に並んだ兄弟要素にそれぞれ兄にmargin-bottom:10pxと弟にmargin-top:20px;
と指定しても合計で30pxにはならずに値の大きい20pxが適用される。

・親要素と最初の子要素それぞれにmagin-topがあるとき
親要素でmagin-top:10px、最初の子要素にmagin-top:20px
と指定しても合計で30pxにはならずに値の大きい20pxが適用される。

・親要素と最後の子要素それぞれにmagin-bottomがあるとき
親要素でmagin-bottom:10px、最初の子要素にmagin-bottom:20px
と指定しても合計で30pxにはならずに値の大きい20pxが適用される。

要点：相殺が起こるのは上下だけ！左右は相殺されない。
「padding + padding」や「padding + margin」は相殺が起こらない。

相殺が起こらないケース
・親要素にテキストが入っている場合
テキストをpタグなどで囲ってしまえばもちろん最初の子要素になるのはpなので理屈はわかりました。
Pタグで囲わずやって見たら相殺されずそういうことかと理解。
・padding-bottom(またはtop)がある場合
親要素にpadding-bottomをつけて間にpaddingをかましたら子要素のmarginが効きます。

ちょっとこの相殺が起こらないケースは実際に自分でコードを書いて見ないと理解できない部分でした。
参考サイトを読んでても「はぁ？」ってなったので実際コードを書いて実践して理解。

Marginによる右中央寄せ

・中央寄せ：左右のmarginを自動で計算してくれる。
margin:0 auto;
注意点
width(or max-width)を指定
効くのはブロック要素だけ！
※max-widthの理解も曖昧なので後日必ず勉強すること。

・右寄せ：左のmarginを自動で計算してくれる。
margin-left:auto;

左寄せはhtmlはもともと左寄せなのでmargin-right:auto;はかかなくてよし

ネガティブマージン

marginの値にマイナスの数値を指定する
・要素を他の兄弟要素と同じ幅にしたいときなどに使用する。
一部のレイアウトの変更などの時に割と使う。

よく使うcssやタグこそ全て確実に理解しておきたいところ。
当たり前のように使うコードをしっかり理解していきたいとおもいます。