【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% )

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト