CSS プロパティ padding-bottom

CSSのpadding-bottomプロパティを理解する

CSS padding-bottom 属性: 要素コンテンツの下部に内側余白を追加する

padding-bottom プロパティは、要素の**下部内側余白**、つまり要素のコンテンツとその下側の境界線との間のスペースを設定します。このプロパティは、長さまたはパーセンテージの値を受け取り、内側余白のサイズを定義します。

1. 構文と値

padding-bottom プロパティは、以下の構文を使用して設定できます。


padding-bottom: 長さ | パーセンテージ | グローバル値;

長さ: px, em, rem などの単位を使用して、固定長を設定できます。
パーセンテージ: 包含ブロックの幅に対するパーセンテージとして内側余白を設定します。
グローバル値: inherit, initial, unset などのグローバル値を使用することもできます。

padding-bottom プロパティで使用する一般的な単位とその意味を以下に示します。

単位	説明
px	ピクセル。画面上の絶対的なピクセル数を表します。
em	要素のフォントサイズに対する相対的な長さ。1em は現在のフォントサイズと同じです。
rem	ルート要素 (html) のフォントサイズに対する相対的な長さ。
%	包含ブロックの幅に対するパーセンテージ。

適切な単位を選択するには、デザインの要件とコンテンツの性質を考慮する必要があります。例えば、固定幅のレイアウトではピクセル単位が適していますが、レスポンシブなデザインでは相対的な単位 (em, rem, %) を使用すると便利です。


<div style="padding-bottom: 20px;">固定ピクセル</div>
<div style="padding-bottom: 2em;">親要素のフォントサイズに対する相対値</div>
<div style="padding-bottom: 10%;">包含ブロックの幅に対するパーセンテージ</div>

2. 動作原理

padding-bottom は、要素のボックスモデルのコンテンツ領域と境界線との間にスペースを作成します。このスペースは、要素の背景色と背景画像で塗りつぶされます。

padding-bottom と margin-bottom の違いは、前者が要素の内部にスペースを作成するのに対し、後者は要素の外部にスペースを作成することです。 margin-bottom は要素の背景色や背景画像では塗りつぶされません。

padding-bottom

margin-bottom

上の例では、左側の div 要素は padding-bottom を使用して下部に青いスペースが作成され、右側の div 要素は margin-bottom を使用して下部に透明なスペースが作成されています。

3. 使用例

3.1 要素間のスペースを作成する

padding-bottom を使用すると、段落、リストアイテムなどの要素間に垂直方向のスペースを作成し、ページの読みやすさを向上させることができます。


<p style="padding-bottom: 1em;">これは段落です。</p>
<p style="padding-bottom: 1em;">これは別の段落です。</p>

3.2 要素の高さを制御する

padding-bottom を使用して、要素の高さを間接的に制御することができます。これは、特に要素のアスペクト比を維持する必要がある場合に役立ちます。


<div style="width: 200px; padding-bottom: 50%;">
    <img src="https://via.placeholder.com/200x100" alt="プレースホルダー画像" style="width: 100%;">
</div>

上記の例では、div 要素の padding-bottom を幅の 50% に設定することで、画像が常に 2:1 のアスペクト比を維持するようにしています。

3.3 視覚効果を実現する

padding-bottom を背景色、境界線などのプロパティと組み合わせることで、影や区切り線などの視覚効果を作成することができます。


<div style="background-color: lightgray; padding-bottom: 10px; margin-bottom: 20px;">
    <div style="background-color: white; padding: 20px;">
        コンテンツ
    </div>
</div>

上記の例では、外側の div 要素に padding-bottom と背景色を設定することで、内側の div 要素の下に影のような効果を作成しています。

4. ブラウザの互換性

padding-bottom プロパティは、すべての主要なブラウザでサポートされています。

ブラウザ	バージョン
Chrome	すべてのバージョン
Firefox	すべてのバージョン
Safari	すべてのバージョン
Edge	すべてのバージョン
Internet Explorer	9 以上

5. まとめ

padding-bottom プロパティは、要素のコンテンツの下部に内側余白を追加するための基本的な CSS プロパティです。要素間のスペースの作成、要素の高さの制御、視覚効果の実現など、さまざまな用途に使用できます。このプロパティをマスターして、より洗練された Web ページを作成しましょう。

よくある質問

Q1: padding-bottom と margin-bottom のどちらを使うべきですか？

要素の内部にスペースを作成する場合は padding-bottom を、要素の外部にスペースを作成する場合は margin-bottom を使用します。 padding-bottom は要素の背景色や背景画像で塗りつぶされますが、 margin-bottom は塗りつぶされません。

Q2: padding-bottom にパーセンテージを使用する場合、そのパーセンテージは何に対する相対値ですか？

padding-bottom にパーセンテージを使用する場合、そのパーセンテージは包含ブロックの**幅**に対する相対値です。

Q3: padding-bottom が要素の高さに影響しないのはなぜですか？

デフォルトでは、要素の高さはコンテンツの高さによって決まります。 padding-bottom を追加すると、要素のコンテンツ領域の下部にスペースが作成されますが、要素の高さ自体は変更されません。ただし、要素の box-sizing プロパティを border-box に設定すると、 padding-bottom が要素の高さに影響を与えるようになります。