中央寄せに便利なmargin:autoの落とし穴・・！

こんにちは！
仕事初めてから1週間過ぎるのが早いです・・( ;∀;)
土日がすぐ来るのは嬉しいことなのですが、このまま月日が経って何も成長してないのにもうこんなに年とっちゃった・・？ってことになるのは避けたいです。
日々学びの精神を忘れずに生きよう！(=ﾟωﾟ)ﾉということで学んだ知識をかいていきます。

今日は「margin autoの使い方」についてです。
WEBページを作成している方なら多くの人が知っているであろうmargin auto。
私はもちろん最近知りました。

通常何も指定しなければdivやpといったブロック要素は左寄りですよね？
でもそれだと初心者感丸出し・・ってときに「中央寄せ　css」で検索するとだいたい出てきます。


ここからはWEB制作にも慣れてきてmargin autoを結構使い始めた時に陥った落とし穴について話します。

状況：style="margin-top: 65px;"を指定済み。それに加え左右の中央寄せをしたい。
行動：style="margin-top: 65px;　margin:auto;"とする。
結果：左右の中央寄せはクリア。だが問題が浮上。
　　　topにmargin を設定していたのにコンテンツが上にへばりついてしまった！！
↓↓
原因をつきつめると共にお約束をまとめていきます。
皆さんお付き合いください。

私は結果をみて疑問に思いました。
むむ・・・margin autoって左右の中央寄せに使うものじゃなかったっけ？
なんで上下が動くんだ？？意味わかんねえ！！！と。

ーーー
そもそもの説明はさみます。
マージンをautoに指定すると値が自動算出されて調整してくれます。
以上、説明おわり。
ーーー

そして
改善案:style="margin:auto;margin-top: 65px;"
にしてみるといい感じで左右の中央寄せとtopの余白をつくってくれたんです！
（このコードはあまり正しくないですが）

調べたりCSSの前提をふりかえったりした結果、謎が解けました。
発見①基本、左右の中央寄せをする場合はmargin: 0 auto;を使う
発見②autoが有効に機能するのは左右のマージンのみ
発見③CSSは後述したものに上書きされていく

発見①に関して
今回私が使っていたmargin:auto;は「上下左右全部auto」という意味なんですね。
せっかく書いたのもなんですが、margin: 0 auto;は「上下0左右auto」という意味なので結局margin:auto;と同じような結果になっちゃいます（上にへばりつく）。よってこの情報は解決策ではないようです。

ーーーーーーーー
ここでめもです。
marginに関する指定をまとめて行う。 
上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定。

＊値を1つ指定した場合：	指定した値が[上下左右]のマージンになる。
＊値を2つ指定した場合：	記述した順に[上下][左右]のマージンになる。
＊値を3つ指定した場合：	記述した順に[上][左右][下]のマージンになる。
＊値を4つ指定した場合：	記述した順に[上][右][下][左]のマージンになる。

ーーーーーーーーー

今なんで同じになっちゃうの？と思った方。読み進めましょう。
はい、
発見②に関して
上下マージンはもともとautoが機能しないんです。
だから上下マージンにautoを指定したらそれはmargin:０と同じということです。（ここが一番大事だ！！！）
つまりmargin:auto;=margin:auto auto;=margin:0 auto;というわけですね。
わたしはてっきりmargin:auto;で左右の調整だけやってくれるものと思ってましたが、上下を０にするという余計なことまでされていたようです・・


ここまで来たらわかってきましたか？
発見③に関して
初めの結果だとmargin-top: 65px;でtopの余白を指定したのにそのあとにmargin:auto;で上下の余白を０に戻しちゃってるんですね。（意味わからなければ「②に関して」を読んでください）
改善案のようにmargin:auto;とmargin-top: 65px;の順番にすれば
margin:auto;（margin 0 auto;）で左右調整して上下の余白は0になっているがそのあとにmargin-topでtopの余白を65pxとるように書き換えられてるんですね～

すっきり！！！

まぁ一番シンプルなのは新結果でまわりくどい書き換えなんてせずに
margin: 65px  auto 0;とするのがよいのかも・・？

それから発見①にかいたあとで申し上げるのは恐縮なのですが
皆さんが左右中央寄せの時に使うらしいmargin 0 auto;は無駄だということです。
最後の最後ですみません。発見②を踏まえたらわかるはず。
marginの初期値は上下左右が0なので、margin 0 auto;したい場合はmargin:auto;だけでいいってことですね～。
上下は初期値の０でよくて左右の中央寄せだけしたいってときはmargin:auto;使いましょう！

結論
今回の解決策は
・margin:auto;からのmargin-top:65pxでtopのみ上書きする
・magrin: 65px auto 0;とひとまとまにしちゃう
この二択かと・・！！

Lmonaはまた1つ成長しました。(/・ω・)/

それでは失礼します。

参考URL
http://www.recipi.jp/3906
https://iwb.jp/css-wasted-properties/
http://www.htmq.com/style/margin.shtml