成功するホームページ制作運用のドルチェプルーフトップページリファレンス《辞典》CSSリファレンスmarginプロパティ《ボックス外側の余白を指定》-CSS-marginプロパティ《ボックス外側の余白を指定》-CSS-marginはコンテンツボックス外側の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えます。本記事ではmarginの基本的な動作と複数ボックスでの余白の適用について紹介します。マージンmarginコンテンツ(要素)外側の余白を指定するコンテンツボックス外側の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えるのにmarginプロパティを使用します。セレクタは対象とする要素、クラス名、id名が指定できます。長さのサイズ値、パーセント値、auto負の値(-10pxなど)の指定も可能です初期値0marginの値は1個から4個まで指定可能です。複数指定する場合は、各値の間に半角スペースを入れて指定します。各値ごとに適用される場所は下記表になります。40px;(上、右、下、左の余白)上に10px、右に20px、下に30px、左に40pxの余白marginは上(margin-top)、右(margin-right)、下(margin-bottom)、左(margin-left)で個別に指定することも可能です。ボックスの余白に影響するプロパティボックスの余白に影響するプロパティはmarginのほかにborder、paddingがあります。ボックスに影響する余白の関係性は下記図のように適用され、marginはコンテンツボックス外側(border外側)の余白を決定します。(10pxの青、グレーの四角)画像を交互に表示しています。margin部分に画像を指定することはできません。本記事ではmargin部分を見やすくするため入れ子にし親要素に背景画像を指定しています。サンプルのコンテンツボックスはwidth:300px;、height:50px、border:5pxで指定しています。5px;}※「影響範囲を表示」ではmarginの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。5px;}※「影響範囲を表示」ではmarginの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。5px;}※「影響範囲を表示」ではmarginの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。5px;}※「影響範囲を表示」ではmarginの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。marginは上下左右を個別に指定することも可能です。下記表が個別箇所とmarginでの記述の仕方になります。10px;marginの値がauto値にauto(自動計算)を指定するとボックスを中央に表示することが可能です。autoは横には適用されますが、縦には適用されないので注意してください。autoを適用する場合、適用するボックスのwidthを指定していないと中央に表示されません。1個を指定しています。1個でなく上下のmarginも指定することをおススメします。0;と記述することをおススメします。※「影響範囲を表示」ではmarginの影響範囲を見やすくするため背景画像(10pxの四角)とwidth:570px、height:200px;を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。margin類の動作を分かりづらくしている要因margin類の利用で迷う原因が「相殺」という動作が発生するということです。「相殺」は、基本的にmargin同士が重なった場合に発生するのですが、分かりづらくしているのが特定のケースの時には発生しないということです。相殺は上下ボックス、親子ボックスでは発生しますが、左右ボックスでは発生しません。相殺とは、margin-bottom:10pxで指定した上ボックスとmargin-top:50px;の下ボックスがある場合、ボックス間は60pxになるはずですが、下記図のように少ない値(10px)は打ち消されるということです。隣接している値が「正」と「負」混在で指定されている相殺は上下のボックス間の他に親子ボックス間でも発生します。親子ボックスでも基本的に重なった場合に相殺が発生します。親ボックスの重なる側にborderが指定されている親ボックスの重なる側にpaddingが指定されている親ボックスにoverflow:hidden;またはscrollが指定されている(auto、visible【初期値】が指定されている場合は相殺が発生)親ボックスにposition:absoluteまたはfixedが指定されている(relative、static【初期値】が指定されている場合は相殺が発生)親、子ボックスどちらかにfloatを指定している親ボックスにheight:auto;以外が指定されている(margin下側の余白のみ【margin-bottom】)marginとfloatが関係するとよく相殺と一緒で間違いやすいのがmarginとfloatが関係した場合です。floatを隣接した兄弟ボックス(上下、左右)片方のみに指定した場合、他方のボックスのmarginは親ボックスとの親子関係になります。これは、floatを指定したボックスは浮動ボックスになるのが理由です。floatに関して詳しくは別記事でご紹介します。floatが指定されると、margin:auto;の値は0になります。上記図のように、兄ボックスにmarginとfloatを指定した場合、弟ボックスの表示で予想と違うことが多くあります。:自動調整されたコンテンツボックスの表示位置)兄ボックスにfloatを指定しているので弟ボックスは親ボックスの左上を起点としたmarginになります。そのため、指定したmargin値によっては浮動ボックス状態の兄ボックスと弟ボックスの重なりが発生し、重なった場合の表示が迷う原因になります。各弟ボックスの赤の指定では問題なく表示されますが、青の場合は兄ボックスに重なってしまい自動調整が入り兄ボックスをさけて表示されます。値通りでは青い点線位置ですが、重なった部分にpaddingのような動作が自動的に加味され、コンテンツボックスは黒枠の位置に表示されます。弟ボックスA:青で指定したmarginの位置は兄ボックスの下に入っています。そのため、上側の20pxはそのままで左側の100pxに兄ボックスの影響範囲幅との差分40pxをpadding-leftと同じ性質をもった架空値が自動的に加味されて表示されます。重なりが解消された場合は架空値は反映されません。弟ボックスB:弟ボックスA同様に兄ボックスの下に入ってしまいますので、上側の80pxはそのままで左側の部分が調整されて表示されます。他のプロパティを追加指定することにより上記以外の表示になることもありますのでfloat使用時には注意してください。本サンプルではmarginの影響範囲を見やすくするため親要素に背景画像(10pxの四角)を指定しています。上下で隣接するボックスのmarginは値の大きい方が適用されるレイアウトなどの調整でmarginを使用する時、想像していた余白と違う場合があります。marginの特徴として隣接する上下のボックスの隣り合うmarginは値の大きい方が適用されます。値の大きい方を適用することを「相殺」といいます。「相殺」は上下では発生しますが、左右では発生しません。50pxで60pxになるように思いますが、実際は隣り合うmargin値の大きい方が適用され50pxの余白になります。ネガティブマージン(-10pxなど)を片方に指定している場合(正負が混在時)は足した値が適用されます。左右で隣接する場合は両方のmargin値を足した値になり、左ボックスのmargin-right:10px、右ボックスのmargin-left:50pxの時、ボックス間の余白は60pxになります。left;}親子ボックスの上下margin値は大きい方が適用されるレイアウトなどでボックス(要素)を入れ子にする場合、親ボックス、子孫ボックス両方の上または下にmarginを指定している時、重なり合う箇所のmargin値は大きい方を適用します。50pxで60pxになるように思いますが、実際は重なり合う箇所のmargin値の大きい方が適用され50pxの余白になります。親要素にoverflow:hidden;やborderなどを指定している時は重なり合うmargin値を足した値になります。左右のmarginに関しては足した値が適用されます。サンプル(親子ボックスにmarginの適用)影響を見やすくする為にfont-sizeおよびline-heigtは10pxにしてありますので、【表示例】のテキストは小さく表示されます。