CSS properties references.

枠関連の属性値

margin,padding,borderに関する属性値

目次

マージン(外余白)に関する属性値

margin-top: margin-right: margin-bottom: margin-left: margin:

パディング(内余白)に関する属性値

padding-top: padding-right: padding-bottom: padding-left: padding:

ボーダー(枠線)に関する属性値

border-top-width: border-right-width: border-bottom-width: border-left-width: border-width border-top-color: border-right-color: border-bottom-color: border-left-color: border-color border-top-style: border-right-style: border-bottom-style: border-left-style: border-style border-top: border-right: border-bottom: border-left: border:

属性値

[枠関連目次] [属性値目次]

margin-top: / margin-right: / margin-bottom: / margin-left:

ボックスのマージン(外余白)を上下左右、個別に設定します。

• 値：<length> | <percentage> | auto (| inherit)
• 初期値：0
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：親要素の横幅を基準に取る
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ○；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

I5.5：autoに対応していません。インライン要素に適用されません。
I6.0：autoは標準互換モードのみ対応しています。
N4.x：autoに対応していません。不安定で状況により変化してしまいます。

[枠関連目次] [属性値目次]

margin:

ボックスのマージン(外余白)を一括して設定します。

• 値：[<length> | <percentage> | auto]{1,4} (| inherit)
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：親要素の横幅を基準に取る
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ○；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

I5.5：autoに対応していません。インライン要素に適用されません。
I6.0：autoは標準互換モードのみ対応しています。
N4.x：autoに対応していません。不安定で状況により変化してしまいます。

[枠関連目次] [属性値目次]

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

ボックスのパディング(内余白)を上下左右、個別に設定します。

• 値：<length> | <percentage> (| inherit)
• 初期値：0
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：親要素の横幅を基準に取る
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

I5.5：インライン要素に適用されません。
N4.x：不安定で状況により変化してしまいます。

[枠関連目次] [属性値目次]

padding:

ボックスのパディング(内余白)を一括して設定します。

• 値：[<length> | <percentage>]{1,4} (| inherit)
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：親要素の横幅を基準に取る
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

I5.5：インライン要素に適用されません。
N4.x：不安定で状況により変化してしまいます。

[枠関連目次] [属性値目次]

border-top-width: / border-right-width: / border-bottom-width: / border-left-width:

ボックスのボーダー(枠)の太さを上下左右、個別に設定します。

• 値：thin | medium | thick | <length> (| inherit)
• 初期値：medium
• 適用：すべてのタグ要素
• 継続性：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

N4.x：インライン要素に指定するとブロック要素扱いになります。

[枠関連目次] [属性値目次]

border-width

ボックスのボーダー(枠)の太さを一括して設定します。

• 値：[thin | medium | thick | <length>]{1,4} (| inherit)
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

N4.x：インライン要素に指定するとブロック要素扱いになります。

[枠関連目次] [属性値目次]

border-top-color: / border-right-color: / border-bottom-color: / border-left-color:

ボックスのボーダー(枠)の色を上下左右、個別に設定します。

• 値：<color> | transparent | inherit
• 初期値：色の属性値
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:2
• 対応：I5.5 ◎；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

[枠関連目次] [属性値目次]

border-color

ボックスのボーダー(枠)の色を一括して設定します。

• 値：<color>{1,4} (| transparent | inherit)
• 初期値：色の属性値
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎

[枠関連目次] [属性値目次]

border-top-style: / border-right-style: / border-bottom-style: / border-left-style:

ボックスのボーダー(枠)の形状を上下左右、個別に設定します。

• 値：none | dotted | dashed | solid | double | groove | ridge | inset | outset (| hidden | inherit)
• 初期値：none
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:2
• 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎

I5.5：hiddenに未対応。(私の環境ではdashedと同じ表示になりました。)
I6.0：hiddenに未対応。
N4.x：dotted,dashed,hiddenに未対応。(私の環境ではdotte,dashedはsolidと同じ表示、hiddenはoutsetと同じ表示になりました。)

値の説明：

none：ボーダーラインの表示無し(重なり合ったとき、他の値が優先)

hidden:ボーダーラインの表示無し(重なり合ったとき、この値が優先)

dotted：点線(Netscape4.x非対応)

dashed:破線(Netscape4.x非対応)

solid:通常の線

double:2重線

groove:立体線

ridge:立体線

inset:立体線

outset:立体線

[枠関連目次] [属性値目次]

border-style

ボックスのボーダー(枠)の形状を一括して設定します。

• 値：none | dotted | dashed | solid | double | groove | ridge | inset | outset (| hidden | inherit)
• 初期値：none
• 適用：すべてのタグ要素
  (Netscape4.xではこの項目を設定するとブロック要素扱いになります。)
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎

I5.5：hiddenに未対応。(私の環境ではdashedと同じ表示になりました。)
I6.0：hiddenに未対応。
N4.x：dotted,dashed,hiddenに未対応。(私の環境ではdotte,dashedはsolidと同じ表示、hiddenはoutsetと同じ表示になりました。)

[枠関連目次] [属性値目次]

border-top:

ボックスのボーダー(枠)の上部分を一括して設定します。

• 値：[<border-top-width> || <border-style> || <color>]| inherit
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[枠関連目次] [属性値目次]

border-right:

ボックスのボーダー(枠)の右部分を一括して設定します。

• 値：[<border-right-width> || <border-style> || <color>]| inherit
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[枠関連目次] [属性値目次]

border-bottom:

ボックスのボーダー(枠)の下部分を一括して設定します。

• 値：[<border-bottom-width> || <border-style> || <color>]| inherit
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[枠関連目次] [属性値目次]

border-left:

ボックスのボーダー(枠)の左部分を一括して設定します。

• 値：[<border-left-width> || <border-style> || <color>](| inherit)
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[枠関連目次] [属性値目次]

border:

ボックスのボーダー(枠)を一括して設定します。

• 値：[<border-width> || <border-style> || <color>](| inherit)
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎