CSS パディングプロパティ 使用されている 要素の内容と要素の境界線の間のスペースを定義します 。
CSS マージンが要素の周囲のスペースを定義する方法が CSS マージンとは異なります。 CSS パディングは背景色の影響を受けます。コンテンツの周囲の領域を消去します。
上下左右のパディングは、個別のプロパティを使用して個別に変更できます。短縮形のパディング プロパティを使用して、すべてのプロパティを一度に変更することもできます。
CSS パディングのプロパティ
| 財産 | 説明 |
|---|---|
| パディング | これは、1 つの宣言ですべてのパディング プロパティを設定するために使用されます。 |
| パディング左 | 要素の左パディングを設定するために使用されます。 |
| 右パディング | 要素の右パディングを設定するために使用されます。 |
| パディングトップ | 要素の上部パディングを設定するために使用されます。 |
| パディングボトム | 要素の下部パディングを設定するために使用されます。 |
CSS パディング値
| 価値 | 説明 |
|---|---|
| 長さ | pt、px、em などの固定パディングを定義するために使用されます。 |
| % | 含まれる要素の % でパディングを定義します。 |
CSS パディングの例
p { background-color: pink; } p.padding { padding-top: 50px; padding-right: 100px; padding-bottom: 150px; padding-left: 200px; } <p>This is a paragraph with no specified padding.</p> <p>This is a paragraph with specified paddings.</p> 今すぐテストしてください 出力：
これはパディングが指定されていない段落です。
これは、パディングが指定された段落です。