padding

要素の内側から表示する内容までの余白を指定します。上下左右の余白を個別、または、まとめて指定することができます。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

・「上下左右」を指定

要素[.class名][#id名]{ padding : 値; }

・「上下 左右」を指定

要素[.class名][#id名]{ padding : 値 値; }

・「上 左右 下」を指定

要素[.class名][#id名]{ padding : 値 値 値; }

・「上 右 下 左」を指定

要素[.class名][#id名]{ padding : 値 値 値 値; }

▲PageTop

指定できる値

値 初期値 意味
数値+単位 余白の大きさを指定します。単位例：px,em,ex,%
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        padding : 10px;
      }
      #sample2 {
        padding : 10px 20px;
      }
      #sample3 {
        padding : 10px 20px 30px;
      }
      #sample4 {
        padding : 10px 20px 30px 40px;
      }
      #sample div{
        border : 1px solid #999999;
        width : 400px;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div>padding指定なしX</div>
      <br>
      <div id="sample1">padding : 10px(上下左右)</div>
      <br>
      <div id="sample2">padding : 10px 20px(上下 左右)</div>
      <br>
      <div id="sample3">padding : 10px 20px 30px(上 左右 下)</div>
      <br>
      <div id="sample4">padding : 10px 20px 30px 40px(上 下 左 右)</div>
    </div>
  </body>
</html>

表示結果

padding指定なしX

padding : 10px(上下左右)

padding : 10px 20px(上下 左右)

padding : 10px 20px 30px(上 左右 下)

padding : 10px 20px 30px 40px(上 下 左 右)

▲PageTop

関連項目

CSS

padding-top / padding-bottom / padding-left / padding-right

▲PageTop

▲