ばけらの CSSリファレンス

margin-top, margin-right, margin-bottom, margin-left プロパティは、それぞれ上マージン、右マージン、下マージン、左マージンを指定します。

マージンとは余白のことで、その要素の中身や background-color, background-image が描画されない領域です。

マージンの値は、px, em, cm などの長さで指定できます。負の値を指定することも可能ですが、環境によっては再現されないかも知れません。

また、パーセント値での指定も可能です。この場合、パーセント値は包含ブロックの横幅に対する割合となります。margin-top や margin-bottom の場合も、高さではなく横幅を参照しますので注意してください。上下のマージンがパーセント値で指定されている場合、ウィンドウを縦に広げてもマージンは変化しません。横に広げると増加することになります。ただし @page{} の中で使った場合は例外で、margin-top と margin-bottom のパーセント指定はページボックスの高さを参照します。

もう一つ、auto という値を取ることが出来ます。これは「ブラウザが勝手に」という意味ではなく、要素の width や height などとの兼ね合いでマージンを算出しろという指定です。たとえば、

div{
 width: 50%;
 padding: 0;
 border: none;
 margin-left: auto;
 margin-right: 5%;
}

となっていれば、この div は contaninig block の 50% の幅となり、右マージンは 5%, 左マージンは 45% となります。また、

div{
 width: 50%;
 padding: 0;
 border: none;
 margin-left: auto;
 margin-right: auto;
}

とすると、左右に 25% ずつのマージンが取られます。つまり、div はセンタリングされます。なお、マージンの初期値は上下左右いずれも 0 で、auto ではありませんので注意してください。

ボックスが上下に並んでいて、それぞれに正の上下マージンが指定されているとき、マージンは重なり合います。たとえば、

p{
 margin-top: 2em;
 margin-bottom: 1em;
}

<p>最初の段落</p>
<p>次の段落</p>

となっていると、最初の段落と次の段落との距離は、3em ではなく 2em となります。ただし、どちらかのマージンが負の値なら合計されますし、浮動体や絶対配置のボックスではマージンが重なることはありません。また、水平方向のマージンも重なりません。

margin プロパティを使うと、margin-top, margin-right, margin-bottom, margin-left を一括指定する事が出来ます。

margin には 4つの値を指定することが出来ます。値はそれぞれ上、右、下、左のマージンに相当します。上から順に時計回りに指定するのだと覚えると良いでしょう。たとえば、

p.note{
 margin: 0.5em 1% 1em 3%;
}

と言う指定は、上マージンを 0.5em, 右マージンを 1%, 下マージンを 1em, 左マージンを 3% に設定します。これは

p.note{
 margin-top: 0.5em;
 margin-right: 1%;
 margin-bottom: 1em;
 margin-left: 3%;
}

という指定と同じです。

margin の指定値は 4 つに満たなくても構いません。その場合、指定されていない場所は、その反対側の辺と同じ値を指定したものとみなされます。たとえば、

div.chapter{
 margin: 0.5em 1% 1em;
}

とすると、上 0.5em, 右 1%, 下 1em を指定、指定されていない左は右と同じ 1% になります。同じように、

blockquote{
 margin: 1em 0;
}

とすると、上 1em, 右 0 を指定したことになり、下と左はそれぞれその反対の辺と同じ値、すなわち 1em と 0 が指定されたものとみなされます。

また、margin に値を一つだけ指定すると、四辺全てにその値を指定したことになります。

padding-top, padding-right, padding-bottom, padding-left プロパティは、それぞれ上パディング、右パディング、下パディング、左パディングを指定します。

パディングとは、その要素の境界と中身との間隔部分のことで、 background-color, background-image が描画される領域です。

パディングの値は、px, em, cm などの長さで指定しできます。負の値を指定することはできません。

また、パーセント値での指定も可能です。この場合、パーセント値は包含ブロックの横幅に対する割合となります。padding-top や padding-bottom の場合も、高さではなく横幅を参照しますので注意してください。

マージンと違い、パディングに auto を指定することは出来ません。初期値は上下左右いずれも 0 です。

padding プロパティを使うと、padding-top, padding-right, padding-bottom, padding-left を一括指定する事が出来ます。

padding には 1つから 4つの値を指定することが出来ます。指定の仕方は margin と同じです。

border-top-width, border-right-width, border-bottom-width, border-left-width は、それぞれ上、右、下、左の境界線の幅を指定します。3px, 2pt, 1em などの値の他、thin, medium, thick というキーワードを指定することもできます。それぞれ細い境界、普通の境界、太い境界を示しますが、具体的な太さは UA に依存します。パーセント値を指定することはできません。

初期値は 0 ではなく medium ですので注意してください。境界幅の指定がなくても、境界は表示され得ます。

border-top-width, border-right-width, border-bottom-width, border-left-width の四つを一括指定するプロパティです。1〜4つの値を指定することができ、上、右、下、左の順に適用されます。値を3つ指定した場合は上、右、下に適用されて左は右と同じ値に、2つ指定した場合は上、右に適用されて下、左はそれぞれ上、右と同じ値になります。値が一つの場合は四辺全てにその値が適用されます。

border-top-color, border-right-color, border-bottom-color, border-left-color は、それぞれ上、右、下、左の境界の色を指定します。色指定の方法は color と同じですが、transparent というキーワードを指定することもできます。transparent を指定すると境界は透明になりますが、透明な境界にも幅はありますので、ボックスのサイズ計算に影響します。

初期値は transparent ではなく、その要素の color プロパティの値です。たとえば、

blockquote{
 color: #008000;
 background: #ffffcc;
 border-style: double;
}

となっていると、blockquote要素には緑色の境界がつくことになります。

border-color は、border-top-color, border-right-color, border-bottom-color, border-left-color の一括指定を行います。例によって1から4つの値が指定でき、上、右、下、左の順に適用されます。値が4つに満たない場合、指定のない辺は反対と同じになり、値が一つの場合は4辺全てに同じ値を指定した事になります。

CSS2 を読むと、transparent というキーワードは他の値と併用できないように読めますが、これは正誤表により訂正されています。border-color: transparent red; のような指定も可能で、この指定は上下の境界を透明に、左右の境界を赤に設定します。

border-top-style, border-right-style, border-bottom-style, border-left-style は、それぞれ上、右、下、左の境界の種類を指定します。以下のキーワードが指定できます。

• none …… 境界なし。境界の幅も 0 になります。border-collapse: collapse の指定された表の中で他の境界と重なった場合、その境界は表示されます。

• hidden …… none と同様ですが、border-collapse: collapse の指定された表の中で他の境界と重なった場合、その境界も非表示にします。

• dotted …… 点線にします。

• dashed …… 破線にします。

• solid …… 実線にします。

• double …… 二重線にします。この場合、border-width は各々の線の太さではなく、2本の線とその間の隙間の合計に等しくなります。

• groove …… 境界線がくぼんで見えるように陰影をつけて表示します。

• ridge …… 境界線が飛び出して見えるように陰影をつけて表示します。

• inset …… 境界の指定された要素全体がへこんで見えるように陰影をつけます。

• outset …… 境界の指定された要素全体が飛び出して見えるように陰影をつけます。

ただし、UA は dotted, dashed, double, groove, ridge, inset, outset の指定を solid とみなしても良いことになっています。

初期値は none です。従って、border-style の指定がなければ境界は表示されません。

border-top-style, border-right-style, border-bottom-style, border-left-style を一括指定できます。1〜4つの値が指定でき、上、右、下、左に適用される点は margin などと同じです。

border-top は border-top-width, border-top-style, border-top-color を一度に指定できます。border-right, border-bottom, border-left もそれぞれ右、左、下の境界線についての指定を一括で行うことができます。

ただし、色名に transparent を指定することはできません。

指定の順序は任意で、省略も可能です。たとえば、

em{
 color: green
 border-bottom: 2px solid red;
 border-top: dotted 1px;
}

とすると、em要素の下には赤い 2px の実線が、上には1pxの点線が現れることになります。border-top に 色の指定がないので、初期値として color の値が採用されて、点線の色は緑になります。

指定を省略した部分には初期値が使われます。これは指定がないのとは違いますので注意してください。たとえば、以下のように指定されていたとします。

h3{
 color: blue;
 border: 1em solid red;
}
h3.full{
 border-left-width: 2em;
 border-left-style: double;
}
h3.short{
 border-left: 2em double;
}

h3.full の左の境界線は 2em, 二重線、赤となります。h3.short の左境界線も 2em, 二重線になりますが、色は赤ではなく青です。2番目の border-left には色の指定が省略されていますが、これは初期値を採用することを意味するので、color の値である blue が採用されて青くなるのです。

border プロパティを使うと、ある要素の四辺の境界幅、境界種、境界色を指定できます。指定の仕方は border-top などと同じです。このプロパティで指定した値は、上下左右4つの辺すべてに適用されます。各辺ごとに異なる値を指定することはできません。