スポンサード リンク
margin-rightプロパティ
要素の枠線の外に余白を指定します使い方(書式)
セレクタ { margin-right: 値; }
margin-rightプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
単位 | px、emなどの単位 |
% | パーセンテージで指定。要素が表示できる幅に対しての割合 |
auto | ブラウザが自動で余白の値を決める |
実際の指定方法
.hoge { margin-right: 20px; } /* 右の余白を20pxに指定 */
.hoge2 { margin-right: 5%; } /* 右の余白を5%に指定 */
.hoge3 { margin-right: auto; } /* 右の余白を自動調整 */
.hogebox { border-right: 1px solid #000; } /* 親boxに右の枠線を表示 */
html部分
<div class="hogebox"> <div class="hoge">margin-right: 20px;</div> <div class="hoge2">margin-right: 5%;</div> <div class="hoge3">margin-right: auto;</div> </div>
実際の表示(わかりやすいように枠線をつけています)
HTML要素を中央寄せ
margin-right: 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>
実際の表示(わかりやすいように枠線をつけています)