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

CSSのpadding-bottomプロパティの使い方を解説！要素の下パディングを指定する方法

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

CSSのpadding-bottomプロパティは、要素の下側のパディング（余白）を指定するためのプロパティです。パディングとは、要素の境界線（border）とその内側のコンテンツとの間にできるスペースのことを指します。

このプロパティには、以下のような値を指定できます。

  • 長さ（length）：px（ピクセル）、em、rem などの単位で固定値を指定します。
  • パーセンテージ（%）：親要素の幅に対する割合で指定します。

padding-bottomの使用例

次のコードでは、1つ目の段落にピクセル単位（10px）、2つ目の段落にパーセント単位（10%）で下パディングを指定しています。どちらも赤い境界線を設定しているため、パディングによる余白が視覚的に確認できます。

<html>
   <head>
   </head>
  <body>
     <p style = "padding-bottom: 10px; border:1px solid red;">
        下パディングが10pxに指定された段落です
     </p>
     <p style = "padding-bottom: 10%; border:1px solid red;">
        下パディングが親要素の幅の10%に指定された段落です
     </p>
  </body>
</html>

実行結果のポイント

上記の例をブラウザで表示すると、各段落のテキストと赤い境界線の間に、指定した分だけ下方向の余白が空いていることがわかります。pxで指定した場合は常に固定の余白になりますが、%で指定した場合は親要素の幅に応じて余白の大きさが変化する点に注意してください。

補足情報

  • padding-bottomは他のパディング関連プロパティ（padding-top、padding-right、padding-left）と組み合わせて使うこともできます。
  • 4辺すべてを一括で指定したい場合は、ショートハンドプロパティのpaddingを使用すると便利です。
  • 初期値は0であり、負の値は指定できません。
  1. CSSでpadding（パディング）プロパティをアニメーションさせる方法

    CSSでpaddingプロパティをアニメーション化するには CSSでは、要素の内側の余白を指定するpaddingプロパティも、アニメーションの対象にすることができます。@keyframesルールと組み合わせることで、パディングの幅を滑らかに変化させ、動きのある演出を実現できます。 基本的な流れは以下のとおりです。 @keyframesでアニメーションの各段階におけるpaddingの値を定義する 対象の要素にanimationプロパティを設定し、名前・再生時間・繰り返し回数を指定する サンプルコード 次のコードでは、3秒周期で無限に繰り返されるアニメーションにより、div要素のパディングが変

  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）