CSS パディングは、 CSSボックスモデルのプロパティの1つです。 この短縮形プロパティは、HTML要素の4辺のすべての周りのパディングを設定します。 CSSパディングは、ほとんどのHTMLタグ （一部のテーブルタグを除く）に適用できます。 さらに、要素の4辺はすべて異なる値を持つことができます。
CSSパディングプロパティ
省略形のCSSパディングプロパティを使用するには、ニーモニック "TRouBLe"（または "TreiBbLe"）を使用できます。 これは、 上 、 右 、 下 、 左を表し、省略形プロパティで設定したパディング幅の順番を表します。 例えば：
パディング：右上の左下。 パディング：1px 2px 3px 6px;上記の値を使用した場合は、それを適用するHTMLエレメントのあらゆる面に異なるパディング値が適用されます。 4辺のすべてに同じパディングを適用する場合は、CSSを単純化して1つの値だけを書くことができます。
パディング：12px;このCSSの行では、12ピクセルのパディングが要素の4辺すべてに適用されます。
パディングが上下左右に同じになるようにするには、次の2つの値を記述できます。
パディング：24px 48px;最初の値（24ピクセル）は上部と下部に適用され、2つ目は左右に適用されます。
3つの値を書き込むと、左右のパディング（左右）が同じになり、上端と下端が変更されます。
パディング：右上および左下。 パディング：0px 1px 3px;CSSボックスモデルによれば、パディングは要素/コンテンツ自体に最も近い。 これは、コンテンツの幅または高さと使用する境界値の間の要素にパディングが追加されたことを意味します。 パディングがゼロに設定されている場合は、コンテンツと同じエッジになります。
CSSパディング値
CSSのパディングは、負でない長さの値をとることができます。 pxやemなどの測定値を指定してください。 パディングのパーセンテージを指定することもできます。これは、要素を含むブロックの幅のパーセンテージになります。 これには、上部と下部のパッドが含まれます。 例えば：
#container {width：800px; 高さ：200px; }＃コンテナp {幅：400ピクセル; 高さ：75％; パディング：25％0; }#container要素内の段落の高さは、 #containerの高さの75％+上の詰め物の幅の25％と、下の詰め物の幅の25％になります。 合計で300 + 200 + 200 = 700pxです。
CSS埋め込みの効果
ブロックレベルの要素では、四方に詰め物が適用されます。 要素は既にブロックまたはボックスであるため、パディングはボックスの側に適用されます。
インライン要素にCSSパディングを追加すると、垂直パディングが行の高さを超えても行の高さが下がらない場合、インライン要素の上下にいくつかの要素が重なることがあります。 インライン要素に適用された水平方向のCSSパディングは、要素の先頭と要素の最後に追加されます。 そして、パディングは行を囲むかもしれません。 ただし、複数行の要素のすべての行には適用されません。したがって、複数行のインラインコンテンツのセグメントをインデントするためにパディングを使用することはできません。
また、CSS2.1では、width（またはpadding width）のパーセンテージを持つ要素に依存するコンテナブロックを作成することはできません。 そうした場合、結果は未定義です。 ブラウザーには内容が表示されますが、期待している結果が得られない場合があります。 これについて考えると、あたかもコンテナ要素がその幅を定義するために子要素の幅を知る必要があるかのように（あらかじめ定義された幅を持たず、1つ以上のコンテナ要素のパーセンテージとして設定された幅ですが、これは応答なしで循環チェーンを設定します。 ドキュメント上の幅のパーセンテージを使用する場合は、親要素の幅も定義する必要があります。