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

初期値 0
適用対象 table-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columnを除く、全ての要素。::first-letterおよび::first-line
継承 しない
アニメーション <length>値
対応ブラウザ caniuseで確認

padding-rightプロパティの説明

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

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

パディングに負の値を指定しても無効となります。各辺に対応するプロパティは以下の通りです。

padding-rightに指定できる値

<length>
CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。
<percentage>
パディングの寸法を包含ブロックの幅(width)を基準に割合(%)で表します。

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

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

CSS
/* <length>値 */
padding-right: 10px;
padding-right: 1rem;

/* <percentage>値 */
padding-right: 5%;
padding-right: 10%;

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

padding-rightの実例

それでは実際にpadding-rightプロパティの書き方を見ていきましょう。以下の例は、同じ装飾を施した要素に異なるパディングの値を指定した場合の比較です。コンテナの余白に応じて内容が押し込められている様子を確認できます。

要素の幅はコンテナの30%まで、box-sizingの値はborder-boxです。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 1rem;
}
.samp_box > div {
	width: 30%;
	margin-top: 1rem;
	background-color: #fff;
}
div > p {
	margin: 0;
	padding: 0;
	background-color: #09f;
	color: #fff;
}
#pad_1 {
	padding-right: 0;
}
#pad_2 {
	padding-right: 10px;
}
#pad_3 {
	padding-right: 2rem;
}
#pad_4 {
	padding-right: 5%;
}
#pad_5 {
	padding-right: 10%;
}
#pad_6 {
	padding-right: 15%;
}
HTML
<section class="samp_box">
	<div id="pad_1"><p>padding-right: 0;</p></div>
	<div id="pad_2"><p>padding-right: 10px;</p></div>
	<div id="pad_3"><p>padding-right: 2rem;</p></div>
	<div id="pad_4"><p>padding-right: 5%;</p></div>
	<div id="pad_5"><p>padding-right: 10%;</p></div>
	<div id="pad_6"><p>padding-right: 15%;</p></div>
</section>

に関連するCSSプロパティ