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

colmun_main3906

marginプロパティの値には、数値の他にautoという値があります。
autoという名前の通り、ブラウサが自動的に値を決めますが、auto特有のルールがあります。
今回は、marginプロパティの値の1つである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)

目次

1.widthなしの場合はauto=0
2.widthありの場合はauto=自動算出

1.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になります。

▲目次へ戻る

 

2.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 】1 ~ マージンとショートハンドをご覧下さい。

 

左右ともマージン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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です