【CSS】padding - パディング

CSSのpaddingプロパティについて解説します。

検証環境

CSS

macOS

14.1

padding

paddingは“パディング”のプロパティです。

上下左右のパディングを一括設定します。

各パディングの個別設定はpadding-top、padding-bottom、padding-left、padding-rightを使用します。

【CSS】padding-top - パディング（上）

【CSS】padding-bottom - パディング（下）

【CSS】padding-left - パディング（左）

【CSS】padding-right - パディング（右）

基本構文

４パターンの基本的な構文があり、それぞれ値の個数が異なります。

全て（値：１個）

値が１個の場合、全て（上下左右）のパディングに適用します。

padding: 値;

上下・左右（値：２個）

値が２個の場合、値1は上下、値2は左右のパディングに適用します。

padding: 値1 値2;

上・左右・下（値：３個）

値が３個の場合、値1は上、値2は左右、値3は下のパディングに適用します。

padding: 値1 値2 値3;

上・右・下・左（値：４個）

値が４個の場合、値1は上、値2は右、値3は下、値4は左のパディングに適用します。

padding: 値1 値2 値3 値4;

サンプル

全て

sample.html

<style>
div {
    border: 1px solid black;
    ___ih_hl_start
    padding: 40px;
    ___ih_hl_end
}
</style>

<div>
    CSS : Cascading Style Sheets.
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</div>

プレビュー

上下・左右

sample.html

<style>
div {
    border: 1px solid black;
    ___ih_hl_start
    padding: 40px 120px;
    ___ih_hl_end
}
</style>

<div>
    CSS : Cascading Style Sheets.
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</div>

プレビュー

上・左右・下

sample.html

<style>
div {
    border: 1px solid black;
    ___ih_hl_start
    padding: 40px 120px 200px;
    ___ih_hl_end
}
</style>

<div>
    CSS : Cascading Style Sheets.
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</div>

プレビュー

上・右・下・左

sample.html

<style>
div {
    border: 1px solid black;
    ___ih_hl_start
    padding: 40px 120px 200px 280px;
    ___ih_hl_end
}
</style>

<div>
    CSS : Cascading Style Sheets.
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</div>

プレビュー