CSSパディング
パディングは、定義された境界線の内側で、要素のコンテンツの周囲にスペースを作成するために使用されます。
CSSパディング
CSSpadding
プロパティは、定義された境界線の内側で、要素のコンテンツの周囲にスペースを生成するために使用されます。
CSSを使用すると、パディングを完全に制御できます。要素の両側(上、右、下、左)のパディングを設定するためのプロパティがあります。
パディング-個々の側面
CSSには、要素の両側のパディングを指定するためのプロパティがあります。
padding-top
padding-right
padding-bottom
padding-left
すべてのパディングプロパティには、次の値を指定できます。
- 長さ-px、pt、cmなどでパディングを指定します。
- % -含まれている要素の幅の%でパディングを指定します
- 継承-パディングを親要素から継承する必要があることを指定します
注:負の値は許可されていません。
例
<div>要素の4辺すべてに異なるパディングを設定します。
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
パディング-速記プロパティ
コードを短くするために、1つのプロパティですべてのパディングプロパティを指定することができます。
このpadding
プロパティは、次の個々のパディングプロパティの省略形のプロパティです。
padding-top
padding-right
padding-bottom
padding-left
だから、これがどのように機能するかです:
padding
プロパティに4つの値がある場合:
- パディング:25px 50px 75px 100px;
- トップパディングは25pxです
- 右のパディングは50pxです
- 下部のパディングは75pxです
- 左のパディングは100pxです
例
次の4つの値でpaddingshorthandプロパティを使用します。
div {
padding: 25px 50px 75px 100px;
}
padding
プロパティに3つの値がある場合:
- パディング:25px 50px 75px;
- トップパディングは25pxです
- 左右のパディングは50pxです
- 下部のパディングは75pxです
例
次の3つの値でpaddingshorthandプロパティを使用します。
div {
padding: 25px 50px 75px;
}
padding
プロパティに2つの値がある場合:
- パディング:25px 50px;
- 上下のパディングは25pxです
- 左右のパディングは50pxです
例
次の2つの値でpaddingshorthandプロパティを使用します。
div {
padding: 25px 50px;
}
padding
プロパティに1つの値がある場合:
- パディング:25px;
- 4つのパディングはすべて25pxです
例
次の1つの値でpaddingshorthandプロパティを使用します。
div {
padding: 25px;
}
パディングと要素の幅
CSSwidth
プロパティは、要素のコンテンツ領域の幅を指定します。コンテンツ領域は、要素(ボックスモデル)のパディング、境界線、およびマージンの内側の部分です。
したがって、要素に指定された幅がある場合、その要素に追加されたパディングは、要素の合計幅に追加されます。これは多くの場合、望ましくない結果です。
例
ここで、<div>要素の幅は300pxです。ただし、<div>要素の実際の幅は350px(300px +左のパディングの25px +右のパディングの25px)になります。
div {
width: 300px;
padding: 25px;
}
パディングの量に関係なく、幅を300pxに保つために、
box-sizing
プロパティを使用できます。これにより、要素は実際の幅を維持します。パディングを増やすと、使用可能なコンテンツスペースが減少します。
例
ボックスサイズ設定プロパティを使用して、パディングの量に関係なく、幅を300pxに維持します。
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
その他の例
この例は、<p>要素の左パディングを設定する方法を示しています。
この例は、<p>要素の右パディングを設定する方法を示しています。
この例は、<p>要素の上部のパディングを設定する方法を示しています。
この例は、<p>要素の下部のパディングを設定する方法を示しています。
すべてのCSSパディングプロパティ
Property | Description |
---|---|
padding | A shorthand property for setting all the padding properties in one declaration |
padding-bottom | Sets the bottom padding of an element |
padding-left | Sets the left padding of an element |
padding-right | Sets the right padding of an element |
padding-top | Sets the top padding of an element |