margin-right

CSSでは、ボックスの右側に余白を設けることができます。

本ページでは、margin-rightプロパティについて説明します。

margin-rightプロパティとは

margin-rightプロパティを使うと、ボックス右側の余白(マージン領域)の大きさを指定できます。

四角い箱の中にコンテンツと表示されています。その右に矢印があり、margin-rightと表示されています。

マージン領域は枠線の外側に設けられるため、右にある要素との間隔を空けることができます。

margin-rightの定義は、以下のとおりです。

【margin-rightの定義】
length | percentage | auto | inherit
初期値 0
適用対象 テーブル表示タイプ(table-caption、table、inline-table以外)の要素を除くすべての要素
継承 しない

値の説明

以下は、margin-rightで使える値と説明です。

length
数値と単位で指定します。マイナスも使えます。
percentage
パーセントで指定します。マイナスも使えます。親要素の横幅×パーセントがマージン領域になります。
auto
ブラウザで決定します。

利用例

利用例を示すために、以下のHTMLを使います。

【margin-rightの利用例を示すためのHTML】
<span class="test1">
テスト1です。
</span>
<span class="test2">
テスト2です。
</span>

margin-rightの利用例は、以下のとおりです。

【margin-rightの利用例】
.test1 {
  border: solid;
  margin-right: 50px;
}

.test2 {
  border:solid;
}

上記は、以下のように表示されます。

2つの要素が横に並んで表示されています。間隔は、50px開いています。

2つの要素間は、かなり開いています。

また、以下のようにも使えます。

【マイナスの利用例】
.test1 {
  border: solid;
  margin-right: -10%;
}

.test2 {
  border: solid;
  margin-left: 50px;
}

margin-leftは、左側のマージン領域を指定します。50pxなので、先ほどと同じ間隔が空くはずですが、test1側でmargin-rightをマイナスで指定しています。

上記は、以下のように表示されます。

2つの要素が横に並んで表示されています。間隔は、ほとんど開いていません。

マイナスで指定した分、間隔が狭くなっています。これは、親要素の横幅(ここではブラウザの横幅)にパーセントを掛けたものになるため、横幅が広いとより間隔は狭くなるか、2つの要素が重なったりします。

中央寄せ(センタリング)

margin-leftもmargin-rightもautoを指定した場合、中央寄せ(センタリング)できます。

以下のHTMLがあったとします。

【中央寄せの利用例を示すためのHTML】
<div class="test1">
テスト1です。
</div>

CSSは、以下です。

【中央寄せするCSS】
.test1 {
  border: solid;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

上記は、以下のように表示されます。

1つの要素がブラウザ画面の中央に表示されています。

親要素の真ん中に表示されます。このため、上記の場合は画面の大きさが変わっても、中央に表示されます。

なお、中央寄せできるのは、ブロックボックスだけです。インラインボックス(spanなど)は、marginで中央寄せはできません。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
margin-right
【スマートフォン】
項目 Sa An Op Ch Fx Sm
margin-right
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「ボックスモデル

CSSプロパティ一覧」に戻る