CSS
パディング

構文

• パディング： length | initial |継承| unset;
• padding-top： length | initial |継承| unset;
• padding-right： length | initial |継承| unset;
• padding-bottom： length | initial |継承| unset;
• padding-left： length | initial |継承| unset;

備考

指定された側のパディング

paddingプロパティは、要素のすべての面にパディングスペースを設定します。パディング領域は、要素の内容とその境界線の間のスペースです。負の値は許可されません。

サイドを個別に指定することができます：

• padding-top
• padding-right
• padding-bottom
• padding-left

次のコードでは、divの上部に5pxパディングが追加されます。

<style>
.myClass {
    padding-top: 5px;
}
</style>

<div class="myClass"></div>

パディングショートカット

paddingプロパティは、要素のすべての面にパディングスペースを設定します。パディング領域は、要素の内容とその境界線の間のスペースです。負の値は許可されません。

パディングを各辺に個別に保存するには（ padding-top 、 padding-leftを使用して）、以下のように簡略化して書くことができます：

4つの値 ：

<style>
    .myDiv {
        padding: 25px 50px 75px 100px; /* top right bottom left; */
    }
</style>
<div class="myDiv"></div>

3つの値 ：

<style>
    .myDiv {
        padding: 25px 50px 75px; /* top left/right bottom */
    }
</style>
<div class="myDiv"></div>

2つの値 ：

<style>
    .myDiv {
        padding: 25px 50px; /* top/bottom left/right */
    }
</style>
<div class="myDiv"></div>

1つの値 ：

<style>
    .myDiv {
        padding: 25px; /* top/right/bottom/left */
    }
</style>
<div class="myDiv"></div>