ITコラム

ITコラム

2017.04.06

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）

１．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 と指定しました。

margin:auto（width指定なし）

　
ソースは次の通りです。

（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を指定すると、次のような表示になります。

margin:2em auto（width指定なし）

　
ソースは次の通りです。

（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を指定すると、次のような表示になります。

margin:1em 1em 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を指定しています。

margin:1em auto 1em 1em

　
ソースは次の通りです。

（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のレイアウトでよく使う設定です。

margin:1em auto 1em auto

　
ソースは次の通りです。

（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>

▲目次へ戻る