スポンサード リンク
margin-leftプロパティ
要素の枠線の外に余白を指定します使い方(書式)
セレクタ { margin-left: 値; }
margin-leftプロパティ
対応ブラウザ | |
適用できる要素 | 全ての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>
実際の表示(わかりやすいように枠線をつけています)
HTML要素を中央寄せ
margin-left: auto;とmargin-right: auto;を使えば指定した要素をセンター寄せできます.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>
実際の表示(わかりやすいように枠線をつけています)