padding

概要

CSS の padding プロパティは、要素の 4 辺全てに必要なパディング領域を設定します。パディング領域とは、要素の内容と境界との間の（枠内）余白の事です。負の値は許可されていません。

padding プロパティは、各辺側の余白 (padding-top 、padding-right 、padding-bottom 、padding-left) を同時に設定するためのショートハンドプロパティです。

構文

padding:   [ <length>| <percentage>] {1,4}

値

次に示す値を 1 つか 2 つか 3 つか 4 つ指定してください。

<length>

正の固定幅を指定します。詳細は<length>を参照して下さい。

<percentage>

包含ブロックの幅に対する割合です。

• 値が1 つの場合、4 辺全てに同じ値が適用されます。
• 値が2 つの場合、1 つ目は上下、2 つ目は左右の辺に適用されます。
• 値が3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下の辺に適用されます。
• 値が4 つの場合、1 つ目は上、2 つ目は右、3 つ目は下、4 つ目は左の辺に適用されます。

例

padding: 5%;                /* 全ての辺に 5% の枠内余白 */

padding: 10px;              /* 全ての辺に 10px の枠内余白 */

padding: 10px 20px;         /* 上下に 10px の枠内余白 */
                            /* 左右に 20px の枠内余白 */

padding: 10px 3% 20px;      /* 上に 10px の枠内余白 */
                            /* 左右に 3% の枠内余白 */
                            /* 下に 20px の枠内余白 */

padding: 1em 3px 30px 5px;  /* 上に 1em  の枠内余白 */
                            /* 右に 3px  の枠内余白 */
                            /* 下に 30px の枠内余白 */
                            /* 左に 5px  の枠内余白 */

border:outset; padding:5% 1em;

仕様

ブラウザ実装状況

関連情報

• CSS のボックスモデル