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