margin-leftプロパティ

TOPページに戻る > CSS

スポンサード リンク

margin-leftプロパティ

要素の枠線の外に余白を指定します
margin-leftプロパティを使えば要素の左に余白を作ることができます
値にautoを使うとHTML要素を中央寄せすることもできます

使い方(書式)

セレクタ { margin-left: 値; }                                    

margin-leftプロパティ

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

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

実際の指定方法

.hoge { margin-left: 20px; }    /* 左の余白を20pxに指定  */

.hoge2 { margin-left: 5%; }     /* 左の余白を5%に指定 */

.hoge3 { margin-left: auto; }   /* 左の余白を自動調整 */
.hogebox {border-left: 1px solid #000;}   /* 親boxに左の枠線を表示 */

html部分

<div class="hogebox">
<div class="hoge">margin-left: 20px;</div>
<div class="hoge2">margin-left: 5%;</div>
<div class="hoge3">margin-left: auto;</div>
</div>

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

margin-left: 20px;
margin-left: 5%;
margin-left: auto;

HTML要素を中央寄せ

margin-left: auto;とmargin-right: auto;を使えば指定した要素をセンター寄せできます
要素に幅を指定しないと中央寄せができないので気をつけてください
古いIEはマージンのautoで中央寄せができません。その代わりIEは親要素にtext-align: center;を指定すると子要素が中央寄せになります
.iehoge{
  text-align: center;    /* ieの中央寄せ  */
 }

.hogeyose { 
 margin-left: auto;      /* 左の余白を自動調整  */
 margin-right: auto;     /* 右の余白を自動調整  */
 width: 150px;        /* 要素の幅  */
 border: 1px solid #000; /* 要素の枠線  */
 text-align: left;       /* ie対策で文字がセンター寄せになってしまったのを修正  */
  }
  
<div class="iehoge">
<div class="hogeyose">要素の内容</div>
</div>

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

要素の内容




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