要素の内側の余白を指定するプロパティです。コンテンツと境界線の間のスペースを調整し、クリック領域の拡大やデザインの余白調整に使用します。上下左右を個別に指定できます。
padding: <length> | <percentage>| p-4 | padding: 16px |
| px-4 | padding-inline: 16px |
| py-2 | padding-block: 8px |
| pt-2 | padding-top: 8px |
一般形: p-{n}（n×4px。p-4 = 16px）
任意値: p-[18px]
論理プロパティ版は ps-{n}（padding-inline-start）/ pe-{n}（padding-inline-end）。
.element {
padding: 16px;
}padding: 16px;全方向に16pxの内側余白
padding: 12px 24px;上下12px、左右24pxの内側余白
padding: 8px 16px 12px 20px;上8px、右16px、下12px、左20pxの内側余白
ボックスサイズに含まれるため、幅の計算に注意。box-sizing: border-boxが便利。
パーセンテージのpaddingは上下方向でも「親の幅」基準という直感に反する仕様があり、かつてはアスペクト比ハックに使われました。AIが古いpadding-topハックを出してきたら、現在はaspect-ratioプロパティが正解です。
このpadding-topによるアスペクト比ハックをaspect-ratioプロパティに置き換えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。