CSSリファレンス -- ボックス

margin-top,margin-right,margin-bottom,margin-left

要素のマージン（上下左右）を個別に設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない (デフォルト値 ＝ 0 )

ボックス領域とその内側にあるボックス領域の外枠との間隔（マージン）をそれぞれ指定する属性です。marji-top は上側、margin-bottom は下側、margin-left は左側、margin-right は右側のマージンにそれぞれ適用されます。　Sample26

PageTop

margin 要素のマージン（上下左右）をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない (デフォルト値 ＝ 各属性の初期値)

ボックス領域とその内側にあるボックス領域の外枠との間隔（マージン）をまとめてする属性です。指定する値の数によって、効果が表れる場所が異なり、値を１つ指定すると、上下左右に共通のマージンが設定され、値を４つ指定すると上下左右それぞれ異なったマージンが設定されます。　Sample27

PageTop

padding-top,padding-right,padding-bottom,padding-left

要素の内容と枠の間の空間（上下左右）を個別に設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない (デフォルト値 ＝ 0 )

コンテンツとそれを囲むボックス領域との間隔（パディング）を指定する属性です。padding-top は上側、padding-right は右側、padding-bottom は下側、padding-left は左側のパディングにそれぞれ設定します。　Sample28

PageTop

padding 要素の内容と枠の間の空間（上下左右）をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝各属性の初期値）

通常ボックス領域は、コンテンツと間隔をあけることなく形成されます。padding属性はコンテンツとボックス領域の間隔（パディング）を設定する属性です。　Sample29

PageTop

border-top-width, border-right-width

border-bottom-width, border-left-width

要素の枠の太さ（上下左右）を個別に設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝medium）

要素領域の枠線（ボーダー）の太さを個別に指定する属性です。

border-top-width 上側

border-right-widt 右側

border-bottom-width 下側

border-left-width 左側

Sample30

PageTop

border-width 要素の枠の太さ（上下左右）をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝medium）

要素領域の上下左右の枠線（ボーダー）の太さをまとめて指定する属性です。　Sample31

PageTop

border-top-style, border-right-style

border-bottom-style, border-left-style

要素の枠のスタイル（上下左右）を個別に設定する

CSS仕様: CSS2

適応要素 ：すべての要素

継承 ：しない（デフォルト＝none）

要素領域の個々の枠線（ボーダー）のスタイルを指定する属性です。　Sample32

PageTop

border-style 要素の枠のスタイル（上下左右）をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝none）

要素領域の上下の枠線（ボーダー）のスタイルを個別に指定する属性です。

border-style １つの場合上下左右同じ値を設定

border-style ２つの場合上下、左右の値を設定

border-style ３つの場合上、左右、下の値を設定

border-style ４つの場合上、右、下、左の値を設定する属性です。

Sample33

PageTop

border-top-color, border-right-color

border-bottom-color, border-left-color

要素の枠（上下左右）の色を個別に設定する

CSS仕様: CSS2

適応要素 ：すべての要素

継承 ：しない（デフォルト＝背景色と同じ色：color属性値）

ボックス領域の上下左右の枠線（ボーダー）の色を個別に指定する属性です。

border-top-color 上の枠線の色

border-right-widt 右の枠線の色

border-bottom-color 下の枠線の色

border-left-color 左の枠線の色

Sample34

PageTop

border-color 要素の枠（上下左右）の色をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝背景色と同じ色：color属性値）

ボックス領域の上下左右の枠線（ボーダー）の色をまとめて指定する属性です。

border-color １つの場合上下左右同じ色を設定

border-color ２つの場合上下、左右の色を設定

border-color ３つの場合上、左右、下の色を設定

border-color ４つの場合上、右、下、左の色を設定

Sample35

PageTop

border-top 要素の枠（上）に関する値をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝各属性の初期値）

border-top属性は枠線の上側の値をまとめて設定します。記述の例として

p｛ border-top: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample36

PageTop

border-right 要素の枠（右）に関する値をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝各属性の初期値）

border-right属性は枠線の右側の値をまとめて設定済ます。記述の例として

p { border-right: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample37

PageTop

border-bottom 要素の枠（下）に関する値をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝各属性の初期値）

border-bottom属性は枠線の下側の値をまとめて設定済ます。記述の例として

p｛ border-bottom: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample38

PageTop

border-left 要素の枠（左）に関する値をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝各属性の初期値）

border-left属性は枠線の左側の値をまとめて設定済ます。記述の例として

p｛ border-left: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample39

PageTop

border 要素の枠（上下左右）に関する値をまとめて設定する

CSS仕様: CSS1

適応要素 ：すべての要素

継承 ：しない（デフォルト＝各属性の初期値）

border属性は枠線の上下左右の値をまとめて設定済ます。記述の例として

p｛ border: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample40

PageTop

width ボックス内側領域の横幅を設定する

CSS仕様: CSS1

適応要素 ：すべての要素（非置換要素とテーブル行を除く）

継承 ：しない (デフォルト ＝ auto)

要素領域の横幅を指定する属性です。マイナスの数値を指定することは出来ません。　Sample41

PageTop

height ボックス内側領域の高さを設定する

CSS仕様: CSS1

適応要素 ：すべての要素（非置換要素とテーブル行を除く）

継承 ：しない (デフォルト ＝ auto)

要素領域の高さを指定する属性です。マイナスの数値を指定することは出来ません。 Sample42