CSS margin:0 auto;の 0は必要？

Question

上下指定の0 は本当に必要ですか？理由がわかりません。

参考記事：　https://qiita.com/tekondo/items/abc1ddddb09879470496

CSS プロパティでよく使う margin:0 auto; の０って必要でしょうか？

margin の初期値は0なので、左右のmarginを0にしたかったら、
**margin: auto; **

と記載しても問題ないのでは？と思いました。

CSS プロパティでよく使う margin:0 auto; の０って必要でしょうか？

Comments

[kei344]

「巷」とはどこでしょう。出典のURL等を提示してください。

[hinoatarubasho]

https://qiita.com/tekondo/items/abc1ddddb09879470496

失礼しました。ご指摘ありがとうございます。
巷という言葉は良くなかったですが、聞きたいところは、なぜ上下に0をわざわざ書くのか、という点です。

[kei344]

（質問文は編集できます）この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

[kokemomo.sour]

蛇足かもしれませんが。。
他の質問サイトでも同じ投稿を見つけました。

https://stackoverflow.com/questions/8312354/is-there-any-difference-between-margin-0-auto-and-margin-auto

position: absoluteの要素をのぞいて、振る舞いは変わらない(no effect)と書かれていますね。

Answer 1

ちょっと実験してみました。

「margin: 0 auto;」と「margin: auto;」で意味が変わる場合の例

<p>margin: 0 auto; </p>
<div class="wrapper">
  <div class="box margin0auto"></div>  
</div>
<p>margin: auto;</p>
<div class="wrapper">
  <div class="box marginauto"></div>  
</div>

.wrapper {
  height: 200px;
  Width: 500px;
  border: 1px solid;
  position: relative;
}

.box {
  height: 100px;
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: blue;
}

.margin0auto {
  margin: 0 auto;
}

.marginauto {
  margin: auto;
}

codepenサンプル

margin-topとは｜コーディングのプロが作るCSS辞典

Comments

[hinoatarubasho]

Code書いて頂き、ありがとうございます！
position: absolute; がある場合は、意味が変わってきますね。
とても勉強になりました。

左右中央にしたいときは、上下のmarginは0にしたいので、autoでまとめて書くのは本意ではないと解釈しました。

Answer 2

margin の初期値は0なので、左右のmarginを0にしたかったら、
margin: auto;

と記載しても問題ないのでは？と思いました。

margin: auto;
は
margin-top: auto;、margin-right: auto;、margin-bottom: auto;、margin-left: auto;
と同義です。

上下のmarginをautoにしたいわけではないので、
margin: 0 auto;と記述しているのだと思います。

Comments

[hinoatarubasho]

ありがとうございます。ショートハンドで、上下左右にauto指定しているんですよね。
でも、記述量が減らせるなら、margin: auto;でもいいのかなって思っちゃったんですｗ
１文字違いなので書けばいいですね????

[new1ro]

上下に0、左右にautoを指定してます。「.clearfix」のクラス名と同じで慣例に近いと思います。
長い物に巻かれている感じですw

position: absolute;などと組み合わせることで上下の中央配置も可能なのですが、その場合
「margin: 0 auto;」と「margin: auto;」では意味が変わってしまうので注意が必要です。

[hinoatarubasho]

その場合は、上下方向も中央にきてしまいますね、、ありがとうございました！