CSS padding property

paddingはパディングを指定するCSSプロパティです。パディングとは、HTML要素内側の余白のことです。

padding

スタイルシート属性 padding は、パディングを指定します。パディングとは、枠線 (border) と表示要素との余白のことです。

書式

padding: all
all
上下左右のパディングの大きさ
padding: topbottom rightleft
topbottom
上下のパディングの大きさ
rightleft
左右のパディングの大きさ
padding: top right bottom left
top
上側のパディングの大きさを指定します。大きさの単位はpx、em、rem、%のいずれかを使用します。
right
右側のパディングの大きさ
bottom
下側のパディングの大きさ
left
左側のパディングの大きさ

使用例

スタイルシート属性 padding の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="padding: 10px; background-color: aquamarine">10px</p>
<p style="padding: 20px; background-color: aquamarine">20px</p>
<p style="padding: 30px; background-color: aquamarine">30px</p>

10px

20px

30px

<p style="padding: 10px 20px; background-color: aquamarine">1rem 2rem</p>
<p style="padding: 20px 10px; background-color: aquamarine">2rem 1rem</p>

1rem 2rem

2rem 1rem

padding-top

スタイルシート属性 padding-top は、パディングを指定します。パディングとは、枠線 (border) と表示要素との余白のことです。

書式

padding-top: padding

属性

padding
上側のパディングの大きさを指定します。大きさの単位はpx、em、%のいずれかを使用します。

使用例

スタイルシート属性 padding-top の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<div style="display: flex">
  <div style="padding-top: 10px; flex: auto; background-color: aquamarine">10px</div>
  <div style="padding-top: 20px; flex: auto; background-color: aquamarine; margin-left: 2px">20px</div>
  <div style="padding-top: 30px; flex: auto; background-color: aquamarine; margin-left: 2px">30px</div>
</div>
10px
20px
30px
<div style="display: flex">
  <div style="padding-top: 1rem; flex: auto; background-color: aquamarine">1rem</div>
  <div style="padding-top: 2rem; flex: auto; background-color: aquamarine; margin-left: 2px">2rem</div>
  <div style="padding-top: 3rem; flex: auto; background-color: aquamarine; margin-left: 2px">3rem</div>
</div>
1rem
2rem
3rem

padding-right

スタイルシート属性 padding-right は、パディングを指定します。パディングとは、枠線 (border) と表示要素との余白のことです。

書式

padding-right: padding

属性

padding
右側のパディングの大きさを指定します。

padding-bottom

スタイルシート属性 padding-bottom は、パディングを指定します。パディングとは、枠線 (border) と表示要素との余白のことです。

書式

padding-bottom: padding

属性

padding
下側のパディングの大きさを指定します。

使用例

スタイルシート属性 padding-top の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="padding-bottom: 10px; background-color: aquamarine">10px</p>
<p style="padding-bottom: 20px; background-color: aquamarine">20px</p>
<p style="padding-bottom: 30px; background-color: aquamarine">30px</p>

10px

20px

30px

padding-left

スタイルシート属性 padding-left は、パディングを指定します。パディングとは、枠線 (border) と表示要素との余白のことです。

書式

padding-left: padding

属性

padding
左側のパディングの大きさを指定します。

使用例

スタイルシート属性 padding-left の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="padding-left: 10px; background-color: aquamarine">10px</p>
<p style="padding-left: 20px; background-color: aquamarine">20px</p>
<p style="padding-left: 30px; background-color: aquamarine">30px</p>

10px

20px

30px

<p style="padding-left: 1em; background-color: aquamarine">1em</p>
<p style="padding-left: 2em; background-color: aquamarine">2em</p>
<p style="padding-left: 3em; background-color: aquamarine">3em</p>

1em

2em

3em

<p style="padding-left: 10%; background-color: aquamarine">10%</p>
<p style="padding-left: 20%; background-color: aquamarine">20%</p>
<p style="padding-left: 30%; background-color: aquamarine">30%</p>

10%

20%

30%

参考文献

World Wide Web Consortium (2020) CSS Box Model Module Level 3