マージンについて考える 1〜margin-auto

HTML&CSS

マージンの挙動をしっかり理解できるとレイアウトをコーディングすることが楽になります。
ここではmargin:autoについて考えてみたいと思います。
margin:autoといえば、ブロック要素の中央揃えね。となりますが、少し掘り下げてみましょう。
通常フローのブロックレベル要素で各マージンの 値を「auto」にした場合は以下のように算出されます。

  1. 上下のマージン(「margin-top」と「margin-bottom」)の値が「auto」なら、上下のマージンは0になります。
    サンプル
  2. 「margin-left」、「margin-right」、「width」のどれか一つが 「auto」なら,包含ブロックの横幅値から算出します。
    包含ブロックの横幅 = (margin-left)+ (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width) + (margin-right)*margin-left:autoを指定した場合には下の計算になる。

    「margin-right」=(包含ブロックの横幅)-{ (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width) + (margin-right)}

    margin:autoの実例

    サンプル
    cssソース

    body{
    	width:600px;
    }
    div {
    	height: 100px;
    	width: 100px;
    	border: 1px solid #00F;
    }
    
    #box1 {
    	background: #6FF;
    	margin-left: auto;
    	margin-right:0px;
    }
    #box2 {
    	background: #C00;
    	margin-right: auto;
    	margin-left:0px;
    }
    #box3 {
    	background: #FF0;
    	margin: auto;
    }
    

    htmlソース

    <div id="box1">
    margin-left:autoを設定
    </div>
    <div id="box2">
    margin-right:autoを設定
    </div>
    <div id="box3">
    margin:autoを設定
    </div>
    
  3. 「width」 の値が 「auto」 なら,「margin-left」と「margin-right」の 「auto」 の値が 0 になる。
    サンプル
  4. 「margin-left」 および 「margin-right」 の指定値が両方とも ‘auto’ なら,両者の算出値は等しくなる。この方法がブロック要素の中央揃えになります。
  5. 「margin-left」、「margin-right」、「width」 の指定値すべてが ‘auto’ 以外の値を採るとき,それらのプロパティのうち一つは指定値とは異る算出値を採る必要が生じます。包含ブロックの書式が左横書きなら 「margin-right」 が無視され,前項に示した等式を満たすように算出値が与えられます。

サンプル

  • インライン要素またはフロート要素の場合、あらゆるマージンの値 「auto」は0になります。
  • スポンサーリンク

    お勧め書籍

    AI関連

    Python

    JavaScript

    HTML CSS関連

    統計学

    HTML&CSS
    スポンサーリンク
    dororoをフォローする
    IT工房|AI入門とWeb開発
    タイトルとURLをコピーしました