JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのpadding-rightプロパティとは？使い方とサンプルコードを解説

CSSのpadding-rightプロパティとは

padding-rightプロパティは、要素の右側に設ける内側の余白（パディング）を指定するためのCSSプロパティです。要素のコンテンツと右側の境界線（ボーダー）との間隔を調整したい場合に使用します。

値には、pxやemなどの長さの単位、または親要素の幅に対する割合を示すパーセント（%）を指定できます。負の値は指定できません。

padding-rightの基本的な書き方

selector {
  padding-right: 値;
}

padding-rightの使用例

以下の例では、1つ目の段落にピクセル単位（10px）、2つ目の段落にパーセント単位（10%）で右パディングを指定しています。どちらも青色の境界線を付けて、余白がどのように反映されるかを視覚的に確認できるようにしています。

<html>
   <head>
   </head>
   <body>
      <p style = "padding-right: 10px; border:1px solid blue;">
         右パディングを指定した段落です
      </p>
      <p style = "padding-right: 10%; border:1px solid blue;">
         パーセントで右パディングを指定した別の段落です
      </p>
   </body>
</html>

指定できる主な値

  • length（長さ）：px、em、remなどの絶対・相対単位で余白を指定します。
  • %（パーセント）：親要素（包含ブロック）の幅に対する割合で余白を指定します。
  • inherit：親要素のpadding-rightの値を継承します。

まとめ

padding-rightプロパティを使うことで、要素の右側の余白を簡単に制御できます。テキストや画像が境界線に密着しないようにしたい場合など、レイアウトの微調整にぜひ活用してください。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのpaddingプロパティ（省略形・ショートハンド）の使い方

    CSSのpaddingプロパティは、padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）の4つの値をまとめて指定できる省略形（ショートハンド）プロパティです。1行で記述できるため、コードがすっきりし、可読性も向上します。 省略形の基本的な書き方 まずは基本となる例を見てみましょう。 padding: 10px 5px 7px 10px; この場合、各辺のパディングは次のように適用されます。 上（top）のパディング：10px 右（right）のパディング：5px 下（bottom）のパディング：7px 左（left）