要点
パディングは、要素の境界とコンテンツの間にある内側の余白を調整します。上下左右の4辺すべてに同じ値を一括で適用することも、上、右、下、左の各辺を個別に設定して、視覚的な密度を調整することもできます。
パディングは、要素*要素ページへのリンク*の内側、つまりコンテナーの表示境界とその中のコンテンツとの間にある視覚的な余白を定義します。要素内のゆとりを直接調整するため、パディングを大きくすると広々とした印象になり、小さくすると引き締まったコンパクトな外観になります。4辺すべてに同じ値を設定することも、辺ごとに異なる値を設定して独自のレイアウトを作成することもできます。
パディングには、px(ピクセル)または%(パーセント)の数値を指定できます。
最小値は0(内側の余白なし)です。上限は設けられていませんが、大きな値を設定すると、コンテンツがポータルページの表示領域外に押し出されます。
| モード | 動作 | 説明 |
| 均等 | 1つの値が4辺すべてに均等に適用されます。 | すべての辺に一貫した余白を設定できます。 最適な用途:アイコン、カード、小さなテキストブロックなど |
| 辺ごと | 上、右、下、左に個別の値を設定します。 | 左右よりも上下の余白を広くするなど、非対称の余白を設定できます。 最適な用途:ヒーローセクション、フレーム、複数の要素を含む複雑なテキストブロックなど |
以下の例は、パディング値によって画像要素の外観がどのように変化するかを示しています。パディングに対応するすべての要素で、同様の表示になります。
)をクリックし、T(上)、R(右)、B(下)、L(左)の各辺に、ピクセルまたはパーセントで個別の値を入力します。パディングは、以下に示す基本要素と複合要素で使用できます。また、すべてのプリセットでスタイルプロパティとして使用できます。
パディングは常に、要素の境界とそのコンテンツとの間にある内側の余白を調整します。ナビゲーションヘッダーやヒーローセクションなどのプリセットでは、外側のコンテナーと内側の各セクションに個別にパディングを適用できます。