marginプロパティ。
CSSに於けるボックス外の余白(マージン)の上下左右の幅・marginプロパティに関する解説です。
marginプロパティとは。
marginプロパティは、ボックス外の余白(マージン)の上下左右の幅です。
- 詳しくはボックスについてをご覧下さい。
ブロックレヴェル要素の場合、text-alignプロパティではなく、このプロパティを用いて左右の余白(マージン)を調整する事でブロックの配置を指定します。
- しかしながら、正しく実装されていないユーザエージェントもあります。詳しくはmarginプロパティに実装上の注意をご覧下さい。
marginプロパティの書式。
marginプロパティの書式は、以下のようになります。
margin: 値値としては、以下のものが取れます。
inherit- 一番近い上位要素で指定された値を継承します。
- 幅の値一つ
- 上下左右、四方の余白の幅を全て指定された幅の値にします。この場合、四方とも同じ幅の値が適用されます。
- 幅二つ
-
の順で空白で区切って指定します。
- 幅の値三つ
-
の順で空白で区切って指定します。
- 幅の値四つ
-
の順で空白で区切って指定します。
上から時計廻り
と覚えると良いでしょう。
marginプロパティで指定出来る幅の値。
marginプロパティで指定出来る幅の値は以下の通りになります。
値としては負の値も許され、その場合他の要素に被さったり画面からはみ出したりする事があります。
尚、marginプロパティを記述した場合、上下左右四方の余白全てが定義される事から、marginプロパティにはデフォルト値は存在しません。
marginプロパティに関する注意事項。
marginプロパティの仕様上の注意。
marginプロパティの相殺。(平成18年 6月28日 追記)
ボックスが上下に隣り合う場合、双方の接する側のmarginプロパティは以下の規則に従って調整されます。
- 双方が同じ符号の場合
- 絶対値の大きい方のmarginプロパティが適用されます。
- 双方の符号が異なる場合
- 双方のmarginプロパティの値の差が適用されます。
- どちらかが零の場合
- 零でない方のmarginプロパティが適用されます。双方零なら適用されるmarginプロパティも零です。
- 左右に隣り合う場合にはmarginプロパティの相殺は行われません。(平成18年 6月28日 追記)
- フロートされたボックスの上下のmarginプロパティも、相殺は行われません。(平成18年 6月28日 追記)
適切なブロックレヴェル要素のセンタリング。
ブロックレヴェル要素をセンタリングする場合、marginプロパティを用います。
この場合、以下の方法があります。
- ボックスに幅を与え、左右に
auto値の余白を与える - 左右に同じ値の余白を与える
- 例えば
.hoge {width: 60%;margin:○auto△;}と指定すれば、このセレクタが適用されるブロックは幅が親要素の60％となって、左右の余白は適切な値が等しく与えられる事でしょう。
- 但しこの場合、
auto値を実装していないユーザエージェント(後述)ではセンタリングしてくれません。
- 但しこの場合、
尚、この方法は左寄せや右寄せでも全く同様に行う事が出来ます。
- 例えば、右寄せを行う場合は右の余白を零にすれば良いのです。
marginプロパティの使用上の注意。
現実的なブロックレヴェル要素のセンタリング。
auto値をサポートしないユーザエージェントがあり(後述)、その場合ブロックレヴェル要素のセンタリングで述べたやり方が使えません。
これらのユーザエージェントでも問題無くブロックレヴェル要素をセンタリングするには、以下の二つの方法があります。
- ブロックの横幅を定めずに左右に等しい余白を与える
- 例えば
.hoge {margin:○20%△;}と指定すれば、このセレクタが適用されるブロックの左右に親要素の幅の20％分の余白が与えられ、当該要素は差し引き60％分の幅でセンタリングされるでしょう。
- 実際にはパディングや枠線の幅が入った場合には、60％より小さな幅になります。
- text-alignプロパティの実装の間違いを併用する
- どう言う訳か、
auto値をサポートしないユーザエージェントではtext-alignプロパティでブロックレヴェル要素をセンタリング出来ます。そこで、この間違いを併用すると言うものです。
具体的には、上位要素でtext-alignプロパティを用いてセンタリングさせ、センタリングさせたいブロックではtext-alignプロパティを正しい値に設定し直します。
具体的には以下のようになります。
* {text-align: left;}body {text-align: center;}.hoge {width: 60%;margin:○auto△;}- 初めの三行でに原則的に左に行揃えを行う事を指定しております。
- 続いて、次の三行で<body>要素に限り、中央寄せするようにしていますが、これはmarginプロパティで
auto値をサポートしないユーザエージェントでセンタリングを行うためのものです。- 実際には<body>要素の直下は必ずブロックレヴェル要素となり、これらは初めの三行で特に指定しない限り内容テキストは左寄せになりますので、影響は出ない事になります。
- 最後にセンタリングしたいブロックに関して、横幅を定め、且つmarginプロパティによる正当なセンタリングを指定しております。
- 正しい実装のユーザエージェントは、<body>要素でのtext-alignプロパティでセンタリングされない代わりにこちらのmarginプロパティに従ってセンタリングされた状態でレイアウトされます。
- 勿論、このブロックは初めの三行での指定により、text-alignプロパティ無しでも内容テキストは左寄せにレイアウトされます。
- 尚、この方法は最初の三行で全称セレクタを用いているため、ネットスケープ 4.xでは内容テキストもセンタリングされてしまいます。ネットスケープ 4.xに対しては個別にtext-alignプロパティを適用するようにします。
marginプロパティの実装上の注意。
ネットスケープ 4.xでの注意事項。
ネットスケープ 4.xでサポートされない値。
- ネットスケープ 4.xでは、auto値をサポートしておりません。
- 更に、上余白と左余白以外では負値を指定しても零と見なされます。
ネットスケープ 4.xでのその他の注意事項。
- ネットスケープ 4.xでは、独自のスタイルシートに従ってデフォルトの余白幅を設定しており、marginプロパティによるマージンの設定は、そのデフォルトの余白幅から変更するためのものとして機能しております。すなわち、ネットスケープ 4.xでは下手にmarginプロパティを使うと、却っておかしな表示になる恐れもあります。
- ネットスケープ 4.xでは、インライン要素にmarginプロパティを当ててはいけません。インライン要素にmarginプロパティを当てると、ブロックレヴェル要素として表示されてしまいます。特に<a>要素はアンカーとして機能しなくなります。
インターネットエクスプローラでの注意事項。
インターネットエクスプローラでサポートされない値。
インターネットエクスプローラでは、以下の例外を除いて、auto値を認識しません。
- ウィンドウズ版 6.x以降及びマッキントッシュ版 5.xでの標準準拠モード
インターネットエクスプローラでの注意事項。
インターネットエクスプローラのウィンドウズ版 5.0x以前及びマッキントッシュ版 4.xでは、インライン要素でのmarginプロパティは機能しません。
WAP 2.0での注意事項。
WAP 2.0では、marginプロパティは必須ではありません。
- オープンウェーヴ社のWAP 2.0 ウェブブラウザではmarginプロパティは実装されておりますが、不安な場合は
の各プロパティを個別に指定すれば良いでしょう。
- これら上下左右個別のプロパティ値はWAP 2.0では必須とされております。
また、オープンウェーヴ社のWAP 2.0 ウェブブラウザではインライン要素に対するmarginプロパティ, margin-leftプロパティ及びmargin-rightプロパティは無効となります。