KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/8th/padding のバックアップ(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/8th/padding へ行く。
  • 1 (2004-11-26 (金) 03:45:26)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

内容のまわりの空間の設定

内容のまわりの空間部分の大きさを設定するには、 padding-???プロパティを設定します。

padding-top: 上の空間部分
padding-bottom: 下の空間部分
padding-left: 左の空間部分
padding-right: 右の空間部分
padding: 上下左右の空間部分
</pre>

#ref(css01.png,nolink,ボックスの構造)

空間部分の大きさは、次の設定ができます。
-%: ボックスの横幅に対する割合
-単位つき数値: 10px、1.5emなど

paddingプロパティを使えば、
上下左右の空間部分を一度に指定できます。
その場合は、値を半角スペースで区切ります。
値の個数によって、次のように空間部分が設定されます。
-値が1つ: 「上下左右」を指定
-値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」
-値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」
-値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」


#pre(novervatim){{
h2.note{
  padding-left: 10px;
  padding-right: 20px;
}
h2.example{
  padding: 10%;
}
</pre>




次へ進んでください。
----
#navi2(Lecture/InfoDesignB2004/8th,prev,toc,next)