CSS入門 | CSSボックスモデル | Padding

paddingプロパティは、contentとborderの間隔であるpadding領域のサイズを設定する。 このpadding領域は、background-colorプロパティで設定する背景色の影響も受ける。 CSSを使うと、padding領域のサイズを方向ごとに個別に設定できる。

paddingプロパティ

CSSでは、HTML要素のpadding領域を設定するために次のプロパティを提供する。

<style>
    div.pad {
        padding-top: 50px;
        padding-right: 10px;
        padding-bottom: 30px;
        padding-left: 100px;
    }
</style>

paddingの省略表記

すべてのpaddingプロパティを使ったスタイルを1行で設定できる。

<style>
    div.four { padding: 20px 50px 30px 50px; }
    div.three { padding: 20px 50px 30px; }
</style>

4つのpadding値を持つ場合は、top、right、bottom、leftの順に設定する。 例: padding: 10px 20px 30px 40px;

これは次の4行のコードと同じ意味を持つ。

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

3つのpadding値を持つ場合は、top、rightとleft、bottomの順に設定する。 例: padding: 10px 20px 30px;

これは次の4行のコードと同じ意味を持つ。

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

2つのpadding値を持つ場合は、topとbottom、rightとleftの順に設定する。 例: padding: 10px 20px;

これは次の4行のコードと同じ意味を持つ。

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

1つのpadding値を持つ場合は、すべてのpadding値を同じ値に設定する。 例: padding: 10px;

これは次の4行のコードと同じ意味を持つ。

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;