CSS【 margin 】2 ～ autoとwidthと上下と左右

marginプロパティの値には、数値の他にautoという値があります。
autoという名前の通り、ブラウサが自動的に値を決めますが、auto特有のルールがあります。
今回は、marginプロパティの値の１つであるautoついてまとめたいと思います。

marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1 ～ マージンとショートハンド
CSS【 margin 】2 ～ autoとwidthと上下と左右（本ページ）
CSS【 margin 】3 ～ ネガティブマージン
CSS【 margin 】4 ～ マージンの相殺 (margin collapsing)（1）
CSS【 margin 】5 ～ マージンの相殺 (margin collapsing)（2）

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．widthなしの場合はauto=0

マージンをautoに指定すると、値が自動算出されて決定しますが、autoが有効に機能するのは左右のマージンのみです。上下のマージンにautoを指定しても、値は0となります。
また、左右のマージンについても、width（要素の横幅）の指定がない場合は自動算出する対象（width）がないため、autoを指定しても値は0となります。

よって、width（要素の横幅）の指定がない場合に「margin:auto（上下左右全部 auto ）」と指定すると、margin:0 と同じ結果になります。
上下マージンは、もともとautoが機能せず、auto指定で0になります。
左右マージンは、widthの指定がないので、0になります。

次の表示は、div要素とp要素を親子関係にして、子要素のp要素にはグレーの背景色を指定しています。
そして、このp要素に、width指定なしで margin:auto と指定しました。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
    border:solid 1px #ccc;
    padding:0;}
div#sample p {
    line-height:3em;
    background:#AAAAAA;
    margin:auto;} 

<!-- HTMLファイル -->
<div id="sample">
    <p>margin:auto（width指定なし）</p>
</div>

div要素（親要素）とp要素（子要素）との間にスペースがないので、マージンは0になっています。
　
このp要素に、width指定なしで左右のマージンのみautoを指定すると、次のような表示になります。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
    border:solid 1px #ccc;
    padding:0;}
div#sample p {
    line-height:3em;
    background:#AAAAAA;
    margin:2em auto;} 

<!-- HTMLファイル -->
<div id="sample">
    <p>margin:2em auto（width指定なし）</p>
</div>

マージンを指定する要素にwidthの指定がない場合は、左右のマージンのauto値は0となります。
auto指定は、widthの値を元に自動算出するので、計算の対象となるwidthの指定がない場合は自動算出ができません。
　
同じく、p要素に、下マージンのみにautoを指定すると、次のような表示になります。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
    border:solid 1px #ccc;
    padding:0;}
div#sample p {
    line-height:3em;
    background:#AAAAAA;
    margin:1em 1em auto;}

<!-- HTMLファイル -->
<div id="sample">
    <p>margin:1em 1em auto</p>
</div>

上下のマージンにはautoが効きません。
上や下のマージンにautoを指定しても、値は0になります。

▲目次へ戻る

　

２．widthありの場合はauto=自動算出

上の例に対して、要素にwidthの指定がある場合は、左右のマージンはauto指定で自動算出されます。
左右のマージンともautoに指定すると、自動算出の結果、横のセンター合わせとなります。

要素にwidthの指定がある場合は、左右のマージンが自動算出される

次の表示は、div要素とp要素を親子関係にして、子要素のp要素にwidthを指定し、右のマージンだけautoを指定しています。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {border:solid 1px #ccc;}
div#sample p {
	background:#AAAAAA;
	padding:1em;
	width:50%;
	margin:1em auto 1em 1em;}

<!-- HTMLファイル -->
<div id="sample">
    <p>margin:1em auto 1em 1em</p>
</div>

右マージンだけautoを指定すると、要素のwidth値やpadding値を差し引いたmarginの値が自動算出されます。表示的には、div要素（親要素）に text-align:left と指定したようなレイアウトです。
逆に、左マージンだけauto指定をした場合も同様に、text-align: right と同じようなレイアウトになります。

margin:1em auto 1em 1em;という指定方法は、CSSのショートハンドです。
ショートハンドについては、CSS【 margin 】１ ～ マージンとショートハンドをご覧下さい。
　

左右ともマージンauto指定の場合は、横方向のセンター合わせとなる

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

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {border:solid 1px #ccc;}
div#sample p {
	background:#AAAAAA;
	padding:1em;
	width:50%;
	margin:1em auto 1em auto;}

<!-- HTMLファイル -->
<div id="sample">
    <p>margin:1em auto 1em auto</p>
</div>

▲目次へ戻る