CSS

The CSS padding-bottom property is used to set the amount of space at the bottom of an element.

padding-bottom

　padding-bottomプロパティは、要素の下部の余白（padding）のサイズを指定するために使用されます。要素内部の内容と周囲の要素との間に余白を設けることができます。この余白は、テキストや画像などの要素との間隔を設定するために使用されます。

　padding-bottomプロパティの値は、ピクセル（px）、パーセント（%）、または em などの単位で指定されます。このプロパティは、要素の高さに影響を与えずに、要素内部のコンテンツとその下にあるコンテンツの間隔を調整するために使用できます。

　たとえば、以下の CSSルールは、IDが "example" の要素の下部に 50ピクセルの余白を設定します。

#example {
	padding-bottom: 50px;
}

　また、次の CSSルールは、IDが "example" の要素の下部に 10％の余白を設定します。

#example {
	padding-bottom: 10%;
}

　padding-bottomプロパティは、他の余白プロパティと組み合わせて使用することができます。たとえば、paddingプロパティは、要素の上下左右すべての余白を同時に指定するために使用できます。以下は、要素のすべての余白に 10ピクセルの余白を指定する例です。

#example {
	padding: 10px;
}

　また、padding-bottomプロパティは、box-sizingプロパティによって要素のサイズを調整する方法に影響を与えることができます。box-sizingプロパティは、要素のサイズを計算する方法を指定するために使用されます。box-sizing: border-box; を使用する場合、padding-bottomプロパティに指定された余白は、要素の高さに含まれます。例えば、以下の CSSルールは、要素の高さが 50ピクセルであることを指定し、その内部に 40ピクセルのコンテンツと 10ピクセルの下部余白を持つ要素を作成します。

#example {
	height: 50px;
	padding-bottom: 10px;
	box-sizing: border-box;
}