【11-2】marginの auto という値の「？」を解決しておこう

前回の【11-1】marginと marginのショートハンド に引き続き、今回も margin についてです。

margin の値には、数値の他に auto という値も使えます。
auto（オート）というからにはブラウサが 値を自動的に決めますが、ちょっと変わったルールがあるので注意が必要です。

まず最初に、autoが効くのは ブロックレベルの要素だけです。
インラインの要素にはmarginのautoは効きません。
（＊インライン・ブロックレベルに関しては【9】HTML要素の インライン・ブロックレベル について をご覧ください）

というわけで今回はブロックレベルの要素に限っての、margin の autoという値の話です。

margin : auto で自動計算されるのは、左や右のマージンだけです。
しかも、要素の幅（width）を指定しなければ、左右のマージンをautoにしてもムダ。0になっちゃう、という特徴があります。
左右のマージンを両方とも auto にすれば 横方向のセンター合わせになります。ちゃんとwidthも指定してあればね。
また、上下のマージンは auto を指定してもムダ。0になっちゃいます。

このルールをきちんと理解していたほうが、レイアウト時に「え〜、なんでできないの〜」とムダに悩まなくて済むはず。（私は何年も悩んでいました。笑）
今回サンプルを見ながら、これらのルールを確認してみましょう！

本日のINDEX

1. 要素にサイズ指定が無ければ margin:auto = margin:0
2. 幅指定があれば、左右のマージンは auto で自動計算
   1. 子要素に幅の指定があるとき、左右のマージンが自動計算される
   2. 左右のマージンauto で横方向のセンター合わせ
   3. width 指定が無ければ auto でも自動計算されない
3. 横方向のセンター合わせは べつにautoだけじゃない
4. 上下のマージンは auto で 0 に
   1. というわけで、縦方向のセンター合わせは auto では不可能
5. 縦方向のセンター合わせの方法
   1. 「display: table」「display: table-cell」を使う
   2. フレックスボックスや、グリッドレイアウトを使う

要素に幅指定が無ければ margin:auto = margin:0

要素に幅（width）指定が無くて、margin:auto（上下左右全部 auto ）だと、margin:0 と同じになります。
左右マージンは、自動で計算する対象（横幅）が無いので、0に。
上下マージンは、もともと auto で 0 なので。

サンプルを見てみましょう。
親要素はdiv。子要素はp。子要素のpには淡いグリーンの背景色を指定しています。
子の p要素に幅指定無しで margin:auto と指定しています。
↓ご覧のとおり、親のdiv要素とのすき間ができていませんね。マージンは0になってます。

幅指定無しで margin:auto

HTMLはこちら。

<div id="sample1">
<p>幅指定無しで margin:auto</p>
</div>

CSSはこちら。

div#sample1 {
	border:solid 1px #ccc; /*親のdivにはグレーのボーダーを指定しています*/
    padding:0;}            /*親のdivのパディングは0です*/
div#sample1 p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3; /*子のpには淡いグリーンの背景色を指定*/
	margin:auto;}  /*マージンは上下左右全部auto*/

幅指定があれば、左右のマージンは auto で自動計算

要素に width 指定があれば、左や右のマージンは auto で自動計算されます。
左右のマージンとも auto にすれば、自動計算の結果、横のセンター合わせになります。

子要素に幅の指定があるとき、左右のマージンが自動計算される

サンプルは、子のp要素に width を指定して、左マージンだけautoにした例です。

margin:1em 1em 1em auto

HTMLはこちら。

<div id="sample2">
<p>margin:1em 1em 1em auto</p>
</div>

CSSはこちら。

div#sample2 {border:solid 1px #ccc; padding:0;}
div#sample2 p {
	text-align:center;
	background:#e9ffd3;
    padding:1em;
	width:30%;  /*幅を指定*/
	margin:1em 1em 1em auto;}  /*左だけautoに指定*/

左マージンだけ auto にすると、要素の width や padding を差し引いた margin が自動計算されています。これ、まるで親に text-align: right と指定したような結果になりますね。

逆に、右マージンだけ auto にした場合も同じく、右側が自動計算されて text-align: left と同じ結果になります。

「margin:1em 1em 1em auto」という書き方は、CSSのショートハンド。上→右→下→左の順に値を指定しています。
詳細は、【11-1】marginと marginのショートハンド をご覧ください。

左右のマージンauto で横方向のセンター合わせ

要素の幅を指定して、左右のマージンをautoにすれば、横方向のセンター合わせになります。これはCSSのレイアウトでよく使います。

横方向のセンター合わせ

HTMLはこちら。

<div id="sample3">
<p>横方向のセンター合わせ</p>
</div>

CSSはこちら。

div#sample3 {border:solid 1px #ccc; padding:0;}
div#sample3 p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3;
	width:50%;
	margin:2em auto;}  /*上下を2em、左右をautoにしています*/

width 指定が無ければ auto でも自動計算されない

そして、ココ注目。
マージンを指定する要素に width の指定が無ければ、左右のマージンautoは0と同じになります。
auto は自動計算する対象が必要なので、幅の指定がないと無意味。

横方向のセンター合わせ（ならず）

CSSはこちら。（HTMLは上のサンプルと同じです）

div#sample4 {border:solid 1px #ccc; padding:0;}
div#sample4 p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3;
	/*幅（width）の指定なし*/
	margin:2em auto;}  /*上下を2em、左右をautoにしています*/

横方向のセンター合わせは べつにautoだけじゃない

横方向のセンター合わせは、左右マージン：auto しか無いわけじゃありません。
センター合わせは左右のマージンが同じ値ならイイわけですよね。
ですので、auto以外の数値の値でも、左右が同じマージンならセンター合わせにできます。

ただし、左右のマージンを auto以外の値にするなら要素のwidthは指定しないこと。親要素に対して子要素の幅が「なりゆき」じゃないとセンター合わせにはならないから。
autoにするならwidthも指定しないとダメ。（width無しだとマージン0になるので）

サンプルは、子要素の左右のマージンを autoじゃなく 30px で指定。width は指定していません。

margin:2em 30px

HTMLはこちら。

<div id="sample5">
<p>margin:2em 30px</p>
</div>

CSSはこちら。

div#sample5 {border:solid 1px #ccc; padding:0;}
div#sample5 p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3;
	margin:2em 30px;}

レスポンシブ・レイアウトでのセンター合わせは、こっちの（autoじゃない）ほうがイイです。
デバイスによって表示領域が変わるため、要素の幅を決めるより、左右の空き（マージン）だけ決めたほうが簡単だから。

上下のマージンは auto で 0 に

上下のマージンには auto が効かないんです。ぜったいに。
上や下のマージンに auto を指定しても 0 になっちゃいます。

サンプルは、下マージンをautoにしています。
margin-bottom: auto は、やっぱり margin-bottom: 0 なのがわかります。

margin:1em 1em auto

CSSはこちら。（HTMLは上のサンプルと同じです）

div#sample7 {border:solid 1px #ccc; padding:0;
div#sample7 p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3;
	margin:1em 1em auto;}  /*下だけauto*/

次のサンプルは、上マージンをautoにした場合です。
やはり margin-top: auto は、margin-top: 0 ですね。

margin:auto 1em 1em

CSSはこちら。

div#sample8 {border:solid 1px #ccc; padding:0;}
div#sample8 p {
	text-align:center;
	line-height:3em;
    background:#e9ffd3;
	margin:auto 1em 1em;}  /*上だけauto*/

というわけで、縦方向のセンター合わせは auto では不可能

上下のマージンに auto が効かないので、縦方向のセンター合わせはautoで不可。
サンプルは、親要素や子要素にサイズ指定をして、margin:auto にした例です。
ま、こうなるわな。左右しかセンター合わせになりません。

margin:auto

CSSはこちら。

div#sample9 {border:solid 1px #ccc; padding:0;
	height:6em;}  /*親に高さ指定*/
div#sample9 p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3;
	width:50%;  /*子に幅指定*/
	margin:auto;}  /*上下左右auto。左右しかセンター合わせにならない*/

で、もうお気づきかと思いますが、
margin: 0 auto イコール margin: auto なんだよね。
横方向センターにする方法で「margin: 0 auto」って書いているサイトが（私が初期に勉強した本でも）あったりするけど、べつに間違いじゃないしエラーにもならないんだけど0いらねって思う。

わざわざ「margin: 0 auto」って書いてあると、逆の「margin: auto 0（上下がauto、左右は0）」もイケるんじゃないかと勘違いしてしまって、CSSの勉強を始めた頃は「上下のマージンのautoは自分はできないけど、なにかコツがあるのだろうか？」とムダに悩みましたww

ちなみに、もう対処は必要無いかと思いますが、IE6 ほどの超オールドブラウザでは auto には未対応で、margin: auto と指定してもデフォルトの左寄せになります。
対処方法は、親要素に text-align: center を指定。子要素は text-align: left に戻しておくこと（昔は大変でしたw）

縦方向のセンター合わせの方法

というわけで、縦方向にセンター合わせって CSS2までは悩みの種でした。margin や padding では絶対にできないので、line-height やら position: absolute でムリしたり、あきらめたり..。
ですが今は、縦方向センターにする方法がいくつかあります。

「display: table」「display: table-cell」を使う

CSS3 から displayプロパティに新しく table-cell という値が加わって事態が好転。テーブルセルだけは vertical-align: middle（縦方向に中央）という指定が使えるから。
テーブルセルじゃない要素でも、かなり気楽に縦方向のセンター合わせができるようになりました。

「display: table」「display: table-cell」については、
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
をご覧ください。

フレックスボックスや、グリッドレイアウトを使う

ほかにも displayプロパティを使って、さらにボックス配置用のプロパティを使う方法もあります。

親要素に display: flex と指定してフレックスボックスを作り、ボックス配置のプロパティである align-content や align-items を使って、子要素を縦方向にセンター合わせにできます。

同じく親要素に display: grid と指定する グリッドレイアウトでも、ボックス配置のプロパティの align-content や align-items を使って、子要素を縦方向にセンター合わせにできます。

それぞれのプロパティについては下記をご覧ください。
フレックスボックスについては、
【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
グリッドレイアウトについては、
【62-1】Grid Layout の grid-template-rows, grid-template-columns
ボックス配置のプロパティについては、
【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）
【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）

次回予告

とにかく、autoが左右にしか効かないこと、そして、autoを指定するなら要素の幅も指定しなきゃダメってことも覚えておくとイイですね。

ところで margin にはマイナスの数値も使えるんです。これをネガティブ・マージンって呼びます。マイナスだと要素内の中身がはみ出すかんじです。
次回はこのネガティブ・マージン（Negative Margin）を使ってみましょう。
ネガティブ・マージンはレイアウトするのにとっても便利です。