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 は要素の背景色や背景画像では塗りつぶされません。
上の例では、左側の 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 が要素の高さに影響を与えるようになります。