【margin-right】右のマージン(余白)を指定

各marginの位置(ボックスの構造)

margin-rightプロパティでは、右のマージンを個別に指定する事ができます。 マージン全体をまとめて指定したい場合はmarginプロパティを指定して下さい。

他の部分を個別に指定したい場合は、margin-topで上、margin-bottomで下、margin-leftで左のマージンを設定できます。

またマージンは負の値も指定する事ができ、複数の領域を重ねたり、親ボックスからはみ出して表示させる事などができます。

書式

  • margin-right : ……… 右のマージンを個別に指定

★:数値、パーセント、auto、inherit

数値+単位
数値にpxなどの単位を付けてマージンを設定します。
パーセント値+%
包含ブロックの横幅に対する割合でマージンを指定します。
auto
マージンが状態に応じて自動で調整されます。インライン要素の上下左右、ブロックレベル要素の上下のマージンの場合は「0」が設定されます。またブロックレベル要素の左右のマージンを「auto」と設定すると、左右共に同じ値となるため、そのボックスはセンタリングされて表示されます。

使用した時の例

.sample1 {margin-right: 40px;}
   
div{background:#DFF2FF;}
<div class="sample1">右のマージン:40px</div>

ブラウザ上の表示例

右のマージン:40px

対応ブラウザなどのデータ

初期値 0 値の継承 継承しない
適用可能な要素 すべての要素(tr,th,td,thead,tbody,tfoot,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報