padding

スペーシング・サイズ

要素の内側の余白を指定するプロパティです。コンテンツと境界線の間のスペースを調整し、クリック領域の拡大やデザインの余白調整に使用します。上下左右を個別に指定できます。

構文

Syntax
padding: <length> | <percentage>
🎮

インタラクティブデモ

コントロール

16px
0px100px

プレビュー

コンテンツ

生成されたCSS

.element { padding: 16px; }

コード例

1

padding: 16px;
実行結果
16pxの内側余白

全方向に16pxの内側余白

2

padding: 12px 24px;
実行結果
上下12px、左右24px

上下12px、左右24pxの内側余白

3

padding: 8px 16px 12px 20px;
実行結果
個別指定の余白

上8px、右16px、下12px、左20pxの内側余白

💡 TIPS

ボックスサイズに含まれるため、幅の計算に注意。box-sizing: border-boxが便利。

関連プロパティ

ブラウザサポート

全ブラウザ対応