[ back / home ]

margin-top,margin-righ,margin-bottom,margin-left

margin-...は、要素と他の要素とのスペース(マージン領域)を個別に指定するプロパティです。

プロパティ

値 <margin-width> | inherit
初期値 0
適用対象 すべての要素
継承性 なし
パーセント値 包含ブロックの幅を100%とする比率。
メディアグループvisual

<margin-width>には、次のものが指定できます。

<length>
長さを指定します。定義は別項参照
<percentage>
%単位。当該ボックスを包含する包含ブロックの幅を100%とする比率を指定します。
auto
要素によってマージンの算出方法が定義されています。

サンプルコード

p.samp1{
    margin-bottom:0
}
p.samp2{
    margin-top:0
}

結果

marginを指定しない場合(見やすくする為にボーダーを入れています。)

内容1

内容2

内容1のmargin-botomを0に内容2のmargin-topを0指定した場合

内容1

内容2

margin

marginは、要素と他の要素とのスペース(マージン領域)をまとめて指定するプロパティです。

プロパティ

値 <margin-width>{1,4} | inherit
初期値 未定義
適用対象 すべての要素
継承性 なし
パーセント値 包含ブロックの幅を100%とする比率。
メディアグループvisual

<margin-width>には、次のものが指定できます。

<length>
長さを指定します。定義は別項参照
<percentage>
%単位。当該ボックスを包含する包含ブロックの幅を100%とする比率を指定します。
auto
要素によってマージンの算出方法が定義されています。

値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます：

サンプルコード

p{
    margin:50px 100px 50px 100px
}

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

概要

padding-...は、パディング領域の幅を個別に指定するプロパティです。

プロパティ

値 <padding-width> | inherit
初期値 0
適用対象 すべての要素
継承性 なし
パーセント値 包含ブロックの幅を100%とする比率。
メディアグループ visual

<padding-width>には、次のものが指定できます。

<length>
長さを指定します。定義は別項参照
<percentage>
%単位。当該ボックスを包含する包含ブロックの幅を100%とする比率を指定します。

サンプルコード

p.samp{
    padding-top:20px
}

結果

paddingを指定しない場合(見やすくする為にボーダーを入れています。)

内容1

内容1のpadding-topを20px指定した場合

内容1

padding

概要

paddingは、パディング領域の幅をまとめて指定するプロパティです。

プロパティ

値 <padding-width>{1,4} | inherit
初期値 0
適用対象 すべての要素
継承性 なし
パーセント値 包含ブロックの幅を100%とする比率。
メディアグループ visual

<padding-width>には、次のものが指定できます。

<length>
長さを指定します。定義は別項参照
<percentage>
%単位。当該ボックスを包含する包含ブロックの幅を100%とする比率を指定します。

値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます：

p.samp{
    padding:20px 10px 20px 10px
}

border-top-width,border-right-width,border-bottom-width,border-left-width

border-...-widthは、ボーダーの太さを個別に指定するプロパティです。

プロパティ

値 <border-width> | inherit
初期値 medium
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

<border-width>には、次のものが指定できます。

thin
細い境界
medium
中間の太さの境界
thick
太い境界
<length>
長さを指定します(負の値をとることができません)。定義は別項参照

サンプルコード

p.samp{
    border-top-width:thin;
    border-left-width:thick;
    border-bottom-width:thin;
    border-right-width:0px;
}

結果

内容1

border-width

border-widthは、ボーダーの太さを4辺まとめて指定するプロパティです。

プロパティ

値 <border-width>{1,4} | inherit
初期値 medium
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

<border-width>には、次のものが指定できます。

thin
細い境界
medium
中間の太さの境界
thick
太い境界
<length>
長さを指定します(負の値をとることができません)。定義は別項参照

値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます：

サンプルコード

p.samp{
    border-width:thin 0px thin thick
}

border-top-color,border-right-color,border-bottom-color,border-left-color

border-...-colorは、各辺のボーダーの色を個別に指定するプロパティです。

プロパティ

値 <color> | transparent | inherit
初期値 colorプロパティの値
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

<color>には、次のものが指定できます。

<color>
色の値を指定します。定義は別項参照
transparent
ボーダーが透明になります。

サンプルコード

p.samp{
    border-top-color:black;
    border-left-color:red;
    border-bottom-color:black;
}

結果

内容1

border-color

border-colorは、ボーダーの色を4辺まとめて指定するプロパティです。

プロパティ

値 [<color> | transparent]{1,4} | inherit
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

<color>には、次のものが指定できます。

<color>
色の値を指定します。定義は別項参照
transparent
ボーダーが透明になります。

値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます：

サンプルコード

p.samp{
    border-color:black black black red;
}

border-top-style,border-right-style,border-bottom-style,border-left-style

border-...-styleは、各辺のボーダーの種類を個別に指定するプロパティです。

プロパティ

値 <border-style> | inherit
初期値 none
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

<border-style>には、次のものが指定できます。

none
ボーダーなし(border-width、0)。隣接する要素で重なるボーダーが存在すればそのボーダーを表示します。
hidden
ボーダーなし。隣接する要素で重なるボーダーが存在しても強制的に非表示にします。
dotted
点線
dashed
破線
solid
実線
double
二重線
groove
窪み線(凹線)
ridge
浮き線(凸線)
inset
ボックス全体が背景に沈みこんでいるように見せる
outset
ボックス全体が背景から浮き上がらせているように見せる

サンプルコード

p.samp{
    border-top-style:dashed;
}

結果

dotted

dashed

solid

double

groove

ridge

inset

outset

border-style

border-styleは、各辺のボーダーの種類をまとめて指定するプロパティです。

プロパティ

値 <border-style>{1,4} | inherit
初期値 none
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

<border-style>には、次のものが指定できます。

none
ボーダーなし(border-width、0)。隣接する要素で重なるボーダーが存在すればそのボーダーを表示します。
hidden
ボーダーなし。隣接する要素で重なるボーダーが存在しても強制的に非表示にします。
dotted
点線
dashed
破線
solid
実線
double
二重線
groove
窪み線(凹線)
ridge
浮き線(凸線)
inset
ボックス全体が背景に沈みこんでいるように見せる
outset
ボックス全体が背景から浮き上がらせているように見せる

サンプルコード

p.samp{
    border-style:dashed;
}

結果

dotted

dashed

solid

double

groove

ridge

inset

outset

border-top,border-right,border-bottom,border-left

border-...は、各辺のボーダーの幅、スタイル、色をまとめて指定するプロパティです。

プロパティ

値 [<border-width> || <border-style> || <'border-top-color'>] | inherit
初期値 個々のプロパティで定められた初期値
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

指定できる値は、<border-width>、<border-style>、<border-color>参照。

幅、スタイル、色のうち何れか一つ以上の値を空白文字で区切って指定します。

サンプルコード

p.samp{
    border-top:thin dashed silver;
}

border

borderは、4辺のボーダーの幅、スタイル、色をまとめて指定するプロパティです。

プロパティ

値 [<border-width> || <border-style> || <'border-top-color'>] | inherit
初期値 個々のプロパティで定められた初期値
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

指定できる値は、<border-width>、<border-style>、<border-color>参照。

幅、スタイル、色のうち何れか一つ以上の値を空白文字で区切って指定します。

サンプルコード

p.samp{
    border:thin dashed silver;
}
[ back / home ]