padding

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

margin (marginとpaddingの境界線がborder)
padding
表示要素

書式

padding: top right bottom left

属性

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

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

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

<p style="padding: 2px; border: 1px solid">padding: 2px</p>

padding: 2px

<p style="padding: 8px; border: 1px solid">padding: 8px</p>

padding: 8px

<p style="padding: 1em; border: 1px solid">padding: 1em</p>

padding: 1em

padding-top

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

書式

padding-top: padding

属性

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

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

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

<p style="padding-top: 4px; border: 1px solid">padding-top: 4px</p>

padding-top: 4px

<p style="padding-top: 8px; border: 1px solid">padding-top: 8px</p>

padding-top: 8px

<p style="padding-top: 16px; border: 1px solid">padding-top: 16px</p>

padding-top: 16px

padding-right

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

書式

padding-right: padding

属性

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

padding-bottom

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

書式

padding-bottom: padding

属性

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

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

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

<p style="padding-bottom: 4px; border: 1px solid">padding-bottom: 4px</p>

padding-bottom: 4px

<p style="padding-bottom: 8px; border: 1px solid">padding-bottom: 8px</p>

padding-bottom: 8px

<p style="padding-bottom: 16px; border: 1px solid">padding-bottom: 16px</p>

padding-bottom: 16px

padding-left

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

書式

padding-left: padding

属性

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

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

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

<p style="padding-left: 1em; border: 1px solid">padding-left: 1em</p>

padding-left: 1em

<p style="padding-left: 2em; border: 1px solid">padding-left: 2em</p>

padding-left: 2em

<p style="padding-left: 4em; border: 1px solid">padding-left: 4em</p>

padding-left: 4em