marginプロパティ

TOPページに戻る > CSS

スポンサード リンク

marginプロパティ

html要素の枠線の外に余白を指定します
marginプロパティを使えば要素の上下左右に余白を作ることができます
上下左右のmarginを一括で指定できるので便利です
marginプロパティは1〜4つの値を指定できます
値にautoを使うとHTML要素を中央寄せすることもできます

使い方(書式)

セレクタ { margin: 値; }                                    

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
% パーセンテージで指定。要素が表示できる幅に対しての割合
auto ブラウザが自動で余白の値を決める
0 余白なしの場合は数字の0を指定

値の数 説明
値が1つ 「上下左右」のマージンを一括で指定する
値が2つ 「上下」「左右」1つ目が上下、2つ目が左右のマージン
値が3つ 「上」「左右」「下」1つ目が上、2つ目が左右、3つ目が下のマージン
値が4つ 「上」「右」「下」「左」1つ目が上、2つ目が右、3つ目が下、4つ目が左のマージン

実際の指定方法

.hoge { margin: 20px; }    /* 上下左右の値を一括指定  */

.hoge2 { margin: 20px 15px; }     /* 上下、左右の値を指定 */

.hoge3 { margin: 20px 30px 15px; }   /* 上、左右、下の値を指定 */

.hoge3 { margin:  20px 30px 15px 35px; }   /* 上右下左の値を1つずつ指定 */
.hogebox { border: 1px solid #000; }   /* 親boxに枠線を表示 */

html部分

<div class="hogebox">
<div class="hoge">margin: 20px;</div>
</div>
<br>
<div class="hogebox">
<div class="hoge2">margin: 20px 15px;</div>
</div>
<br>
<div class="hogebox">
<div class="hoge3">margin: 20px 30px 15px;</div>
</div>
<br>
<div class="hogebox">
<div class="hoge4">margin:  20px 30px 15px 35px;</div>
</div>

実際の表示(わかりやすいように枠線をつけています)

margin: 20px; 上下左右の値を一括指定

margin: 20px 15px; 上下、左右の値を指定

margin: 20px 30px 15px; 上、左右、下の値を指定

margin: 20px 30px 15px 35px; 上、右、下、左の値を1つずつ指定

HTML要素を中央寄せ

margin: autoを使えば指定した要素をセンター寄せできます
要素に幅を指定しないと中央寄せができないので気をつけてください
古いバージョンのIEはマージンのautoで中央寄せができません。その代わりIEは親要素にtext-align: center;を指定すると子要素が中央寄せになります
※margin: 0 auto;と上下の余白が0になっていますが、5pxでも10pxでも自由に指定できます
.iehoge{
  text-align: center;    /* ieの中央寄せ  */
 }
 
.hogeyose { 
 margin: 0 auto;     /* 上下のマージンを0に、左右は自動調整でセンター寄せ  */
 width: 150px;           /* 要素の幅  */
 border: 1px solid #000; /* 要素の枠線  */
 text-align: left;       /* ie対策で文字がセンター寄せになってしまったのを修正  */
  }
  
<div class="iehoge">
<div class="hogeyose">要素の内容</div>
</div>

実際の表示(わかりやすいように枠線をつけています)

要素の内容



(C)2012 ホームページ作成無料