HITP 広島工業大学専門学校

ホームページの基礎(2. CSS 編)

← 2.10 ボックスモデル(マージン)  CSS総目次  2.12 ボックスモデル(ボーダー) →

  1. 2.11 ボックスモデル(パディング)
    1. 2.11.1 パディング幅のプロパティ
    2. 2.11.2 padding-top,padding-bottom,padding-left,padding-rightプロパティ
    3. 2.11.3 paddingプロパティ

2.11 ボックスモデル(パディング)

このページでは,ボックスモデルにおけるパディング幅に関するプロパティについて説明します。

2.11.1 パディング幅のプロパティ

パディング幅を設定するプロパティには,「padding-top(上パディング)」,「padding-bottom(下パディング)」,「padding-left(左パディング)」,「padding-right(右パディング)」およびこれら4種類のプロパティの一括指定を行う簡略記法の「padding」があります。

パディング幅の設定

CSS総目次 | ページ先頭に戻る

2.11.2 padding-top,padding-bottom,padding-left,padding-rightプロパティ

padding-topプロパティ」は上パディングの幅,「padding-bottomプロパティ」は下パディングの幅,「padding-leftプロパティ」は左パディングの幅,「padding-rightプロパティ」は右パディングの幅を指定します。その書式は以下のとおりです。

padding-top,padding-bottom,padding-left,padding-rightプロパティ
<パディング幅> | inherit
初期値0
適用対象すべての要素(テーブル内部要素(行,列類)は除外する)
継承しない
パーセント値包含ブロックの横幅に対する割合

<パディング幅>に指定する値はつぎのとおりです。

<長さ>
パディング幅をemやexなどの単位付き数値で指定します。ただし,負の数値は指定できません。
<%値>
パディング幅を包含ブロックの横幅に対する比率で指定します。ただし,負の数値は指定できません。

CSS総目次 | ページ先頭に戻る

2.11.3 paddingプロパティ

paddingプロパティ」は上下左右のパディングの幅を一括して指定します。その書式は以下のとおりです。

paddingプロパティ
<パディング幅>{1,4} | inherit
初期値個別のプロパティを参照する
適用対象すべての要素(テーブル内部要素(行,列類およびセル)は除外する)
継承しない
パーセント値包含ブロックの横幅に対する割合

paddingプロパティの4つの値の指定方法は,marginプロパティと同じです。

CSS総目次 | ページ先頭に戻る

(C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.