margin-right:要素の右辺にあたる外側の余白を指定する

初期値 0
適用対象 tableinline-tabletable-caption以外の表を構成するdisplayの値を持つ要素を除く、全ての要素。::first-letterおよび::first-line
継承 しない
アニメーション <length>値
対応ブラウザ caniuseで確認

margin-rightプロパティの説明

margin-rightは、要素の右辺にあたる外側の余白を指定します。これは、CSSのボックス・モデルにおけるマージン・ボックス(Margin box)の寸法を定義するプロパティの一種です。

要素を配置すると、そこに四角形のボックスが生成されます。marginは、その四辺全ての余白を一括で制御しますが、margin-rightは右方向の寸法のみを扱います。

マージンの操作はインライン要素には効きません。負の値を指定すると、要素を重ねることもできます。関連するプロパティは以下の通りです。

margin-rightに指定できる値

<length>
CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。
<percentage>
マージンの寸法を包含ブロックの幅(width)を基準に割合(%)で表します。
auto
ブラウザの自動計算を採用します。要素の左右にこの値を指定すると、均等に余白を分配するため中央に寄せられて配置されます。

margin-rightの使い方とサンプル

margin-rightプロパティの構文は以下の通りです。

CSS
/* <length>値 */
margin-right: 10px;
margin-right: 1rem;
margin-right: -24mm;

/* キーワード値 */
margin-right: auto;

/* グローバル値 */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: unset;

margin-rightの実例

それでは実際にmargin-rightプロパティの書き方を見ていきましょう。以下の例は、背景色を白く塗った<div>要素の中に<p>要素を配置して、マージンの値を変えた時の比較です。<p>要素にも背景色が指定されており、余白の違いを確認できます。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > div {
	overflow: auto;
	margin-top: 1rem;
	background: #fff;
}
.samp_box p {
	margin: 0;
	padding: .5rem;
	background-color: #09f;
	color: #fff;
}
#margin_1 {
	margin-right: auto;
}
#margin_2 {
	margin-right: 10px;
}
#margin_3 {
	margin-right: 2rem;
}
#margin_4 {
	margin-right: 10%;
}
#margin_5 {
	margin-top: 10px;
	margin-right: 10%;
	margin-bottom: 2rem;
	margin-left: 0;
}
HTML
<section class="samp_box">
	<div>
		<p id="margin_1">margin-right: auto;</p>
	</div>
	<div>
		<p id="margin_2">margin-right: 10px;</p>
	</div>
	<div>
		<p id="margin_3">margin-right: 2rem;</p>
	</div>
	<div>
		<p id="margin_4">margin-right: 10%;</p>
	</div>
	<div>
		<p id="margin_5">margin: 10px 10% 2rem 0;</p>
	</div>
</section>

margin-rightに関連するCSSプロパティ

余白の範囲
margin 要素の外側の余白(マージン)をまとめて指定する
margin-bottom 要素の下辺にあたる外側の余白(マージン)を指定する
margin-left 要素の左辺にあたる外側の余白(マージン)を指定する
margin-right 要素の右辺にあたる外側の余白(マージン)を指定する
margin-top 要素の上辺にあたる外側の余白(マージン)を指定する
padding 要素の内側の余白(パディング)をまとめて指定する
padding-bottom 要素の下辺にあたる内側の余白(パディング)を指定する
padding-left 要素の左辺にあたる内側の余白(パディング)を指定する
padding-right 要素の右辺にあたる内側の余白(パディング)を指定する
padding-top 要素の上辺にあたる内側の余白(パディング)を指定する