CSS - padding

概要

属性名	padding
値	[ <length> \| <percentage> ]{1,4}
初期値	0
適用可能要素	すべての要素
継承	継承しない
メディア	visual

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS1	4.0	1.0	1.0	3.5	1.0

説明

パディングを指定します。

値	説明
<length>	パディングを 10px 1.5em などの長さの単位で指定します。
<percentage>	パディングを 10% など、要素の大きさに対するパーセントで指定します。

パディングは、下記の例で、赤いボーダーラインと内側のコンテンツとの間の隙間に相当します。赤いボーダーラインと周りのコンテンツとの間の隙間(マージン)を指定するには marginを指定します。

周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテ

内側のコンテンツ内側のコンテンツ内側のコンテンツ内側のコンテンツ内側のコ

ンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコ

パディングは 1～4個指定可能で、それぞれ、次のように解釈されます。

CSS

padding: 10px;				/* 上側:10px、右側:10px、下側:10px、左側:10px */
padding: 10px 20px;			/* 上側:10px、右側:20px、下側:10px、左側:20px */
padding: 10px 20px 30px;		/* 上側:10px、右側:20px、下側:30px、左側:20px */
padding: 10px 20px 30px 40px;	/* 上側:10px、右側:20px、下側:30px、左側:40px */

使用例

HTML

<h3>padding:3px</h3>
<div style="border:1px solid #666666; padding:3px; width:100px">
   ああああああああああああああああああああああああああああああああ
</div>
<h3>padding:20px</h3>
<div style="border:1px solid #666666; padding:20px; width:100px">
   ああああああああああああああああああああああああああああああああ
</div>

表示

padding:3px

ああああああああああああああああああああああああああああああああ

padding:20px

ああああああああああああああああああああああああああああああああ

リンク

初版：1997年7月27日、最終更新：2015年11月22日

https://www.tohoho-web.com/css/prop/padding.htm

CSS - padding

概要

サポート (説明)

説明

使用例

関連項目

リンク