margin-...は、要素と他の要素とのスペース(マージン領域)を個別に指定するプロパティです。
値 | <margin-width> | inherit |
---|---|
初期値 | 0 |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 包含ブロックの幅を100%とする比率。 |
メディアグループ | visual |
<margin-width>には、次のものが指定できます。
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-width>{1,4} | inherit |
---|---|
初期値 | 未定義 |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 包含ブロックの幅を100%とする比率。 |
メディアグループ | visual |
<margin-width>には、次のものが指定できます。
値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます:
p{ margin:50px 100px 50px 100px }
padding-...は、パディング領域の幅を個別に指定するプロパティです。
値 | <padding-width> | inherit |
---|---|
初期値 | 0 |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 包含ブロックの幅を100%とする比率。 |
メディアグループ | visual |
<padding-width>には、次のものが指定できます。
p.samp{ padding-top:20px }
内容1
内容1のpadding-topを20px指定した場合
内容1
paddingは、パディング領域の幅をまとめて指定するプロパティです。
値 | <padding-width>{1,4} | inherit |
---|---|
初期値 | 0 |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 包含ブロックの幅を100%とする比率。 |
メディアグループ | visual |
<padding-width>には、次のものが指定できます。
値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます:
p.samp{ padding:20px 10px 20px 10px }
border-...-widthは、ボーダーの太さを個別に指定するプロパティです。
値 | <border-width> | inherit |
---|---|
初期値 | medium |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
<border-width>には、次のものが指定できます。
p.samp{ border-top-width:thin; border-left-width:thick; border-bottom-width:thin; border-right-width:0px; }
内容1
border-widthは、ボーダーの太さを4辺まとめて指定するプロパティです。
値 | <border-width>{1,4} | inherit |
---|---|
初期値 | medium |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
<border-width>には、次のものが指定できます。
値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます:
p.samp{ border-width:thin 0px thin thick }
border-...-colorは、各辺のボーダーの色を個別に指定するプロパティです。
値 | <color> | transparent | inherit |
---|---|
初期値 | colorプロパティの値 |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
<color>には、次のものが指定できます。
p.samp{ border-top-color:black; border-left-color:red; border-bottom-color:black; }
内容1
border-colorは、ボーダーの色を4辺まとめて指定するプロパティです。
値 | [<color> | transparent]{1,4} | inherit |
---|---|
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
<color>には、次のものが指定できます。
値は空白文字で区切って複数指定が可能です。指定した数によって次のように適用されます:
p.samp{ border-color:black black black red; }
border-...-styleは、各辺のボーダーの種類を個別に指定するプロパティです。
値 | <border-style> | inherit |
---|---|
初期値 | none |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
<border-style>には、次のものが指定できます。
p.samp{ border-top-style:dashed; }
dotted
dashed
solid
double
groove
ridge
inset
outset
border-styleは、各辺のボーダーの種類をまとめて指定するプロパティです。
値 | <border-style>{1,4} | inherit |
---|---|
初期値 | none |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
<border-style>には、次のものが指定できます。
p.samp{ border-style:dashed; }
dotted
dashed
solid
double
groove
ridge
inset
outset
border-...は、各辺のボーダーの幅、スタイル、色をまとめて指定するプロパティです。
値 | [<border-width> || <border-style> || <'border-top-color'>] | inherit |
---|---|
初期値 | 個々のプロパティで定められた初期値 |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
指定できる値は、<border-width>、<border-style>、<border-color>参照。
幅、スタイル、色のうち何れか一つ以上の値を空白文字で区切って指定します。
p.samp{ border-top:thin dashed silver; }
borderは、4辺のボーダーの幅、スタイル、色をまとめて指定するプロパティです。
値 | [<border-width> || <border-style> || <'border-top-color'>] | inherit |
---|---|
初期値 | 個々のプロパティで定められた初期値 |
適用対象 | すべての要素 |
継承性 | なし |
パーセント値 | 適用不可 |
メディアグループ | visual |
指定できる値は、<border-width>、<border-style>、<border-color>参照。
幅、スタイル、色のうち何れか一つ以上の値を空白文字で区切って指定します。
p.samp{ border:thin dashed silver; }
Copyright 1997-2010 BBB All rights reserved.