padding
paddingは、要素の内側の余白をpadding-top、padding-right、padding-bottom、padding-leftの4辺まとめて指定できるショートハンドプロパティです。CSSボックスモデルの基本要素であり、コンテンツとボーダーの間にスペースを確保します。値の数によって1辺から4辺まで柔軟に指定でき、あらゆるレイアウトの基礎となるプロパティです。
概要
paddingは、要素の内側の余白をpadding-top、padding-right、padding-bottom、padding-leftの4辺まとめて指定できるショートハンドプロパティです。CSSボックスモデルの基本要素であり、コンテンツとボーダーの間にスペースを確保します。値の数によって1辺から4辺まで柔軟に指定でき、あらゆるレイアウトの基礎となるプロパティです。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.card {
padding: 16px;
}
.section {
padding: 24px 32px 24px 32px;
}実務での使いどころ
-
コンテンツエリアの余白設定
カードコンポーネントやセクション内のテキストとボーダーの間に適切なスペースを確保し、読みやすさを向上させます。
注意点
- box-sizing: border-boxを使用しない場合、paddingは要素の幅と高さに加算されるため、レイアウト計算に注意が必要です。
アクセシビリティ
- 十分なパディングを確保することで、タッチターゲットのサイズを適切に保ち、モバイルユーザーの操作性を向上させます。