padding-***: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

padding-*** は、上下左右のパディングを個別に指定するプロパティです。（*** の部分には、top、right、bottom、left が入ります）


div {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
プロパティ名 値 説明
padding-top 数値+単位（px 等）またはパーセント 上のパディングを指定
padding-right 数値+単位（px 等）またはパーセント 右のパディングを指定
padding-bottom 数値+単位（px 等）またはパーセント 下のパディングを指定
padding-left 数値+単位（px 等）またはパーセント 左のパディングを指定

初期値は 0 です。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p {
width: 200px;
background-color: #85b9e9;
padding-top: 20px;
padding-bottom: 50px;
}

</style>

</head>
<body>

<p>上に20px、下に50pxのパディング</p>

</body>
</html>
表示例

上に20px、下に50pxのパディング