CSS: パディングを指定する(padding プロパティ)

ボックスのパディングを指定するには padding プロパティを使用します。 パディングはボーダー(枠線)のと内容領域の間の余白領域です。

padding

内容領域、パディング、ボーダー、マージンの関係について知りたい人はコチラのページを参照してください。 (参考記事: CSSのボックスモデル

パディングをまとめて指定する場合は padding プロパティを使い、 個別に指定する場合は padding-top、padding-right、padding-bottom、padding-left プロパティ を使います。

使用例


/* まとめて指定する場合 */
padding: 1px;                /* 上下左右同じ  */
padding: 1px 2px;            /* 上下、左右    */
padding: 1px 2px 3px;        /* 上、左右、下  */
padding: 1px 2px 3px 4px;    /* 上、右、下、左 */

/* 個別に指定する場合 */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

値の指定方法

★ 実数値+単位

数値に単位を付けて指定します。(例 5px )

★ パーセント+%

包含ブロックの横幅に対するパーセンテージで指定します。(例 95% )

HTML・CSS入門