通常フローとマージン相殺

通常フローとは？

まず通常フローとは何でしょう？フローという表現が分かり難いかもしれませんが、流れ … 川の流れみたいなもの（あくまでイメージです）。この流れの上に、各要素が乗っかって、レイアウトとして配置されていくんですねー。

そしてこのフローには、ブロックボックスが属する流れ（ブロックボックス整形文脈）とインラインボックスが属する流れ（インラインボックス整形文脈）のふたつがあります。

①ブロックボックス整形文脈

ブロックボックス整形文脈 … 言葉は難しそうですが、ブロックボックスが属する流れのこと。この流れの中でブロックボックスは、上から下へどんどん配置されていきます。さっき見出しを例にして見てきましたね！言葉は難しそうですけど、内容はとっても簡単です。

そういえばさっき匿名ブロックボックスというのがありましたね！覚えてますか？さっき、なんで匿名ブロックボックスというものが必要なのかなー？と思った人もいるかもしれませんが、このブロックボックス整形文脈の流れに乗せる為に、匿名ブロックボックスが必要だったんですねー。

この流れ、ブロックボックス整形文脈の中では、ブロックボックスの左外辺（マージンがある場合は マージンの左辺）が、包含ブロックの左外辺にくっつく形で配置されます。すでにコーディングに慣れてる人にとっては、当たり前といえば当たり前ですねー。通常フローの中では、包含ブロックは基本親要素になりますから、親要素の左端に接する形で配置されますよね！

そして上下の間隔はマージンによって決まります。ここで気をつけなくてはいけないのがマージンの相殺です …。マージンの相殺については、ちょっと後で詳しく書きます。

 

②インライン整形文脈

ブロックレベル整形文脈は、ブロックボックスを配置するフローでした。それに対してインライン整形文脈は、インラインボックスを配置する流れです。インラインボックスは包含ブロックの上から、横方向に並べられていきます。

これも簡単ですねー！インラインボックスは行内の一部ですから、とても自然な流れで理解しやすいと思います。

また、インラインボックス（匿名インラインボックスも含みます。）は横に並んでいきますが、いわゆる一行という単位で行ボックスという四角い領域も作られています。

 

 

行ボックスは、基本的に包含ボックスの幅いっぱいに広がります。でも間にフロートした要素がある場合に、幅が狭くなる場合があります。ん？間にフロートが入る場合って？ … それはこの後のフロートのところで詳しく説明しますねー！

「CHECK POINT」
CSSには、通常フローという流れがある。
ブロックボックスはブロックボックス整形文脈に属して、インラインボックスはインライン整形文脈に属します。

マージンの相殺が起こる場所

さて、ブロックボックス整形文脈のところで、マージンの相殺という言葉が出てきました。マージンの相殺は、上下に隣り合っている同士のボックスの間と、入れ子関係にあるボックスの間で起こります。左右に隣り合っている場合は相殺されません。

入れ子関係のときの場合は、ボーダーやパディングがお互いのマージンの間にない場合に限り、マージンの相殺が起こります。ちょっと図を使って説明しますね！

①マージンの相殺：上下に隣り合ってる場合

 

 

 

 

上のボックス 1には margin-bottom: 50px が指定してあります。そして下のボックス 2には margin-top: 30px が指定してあります。このような場合、マージンは足して 80px になる訳ではなくて、相殺されて大きい方の 50pxになるんですねー。これは上下にとなり合ってるボックス同士の場合です。横に並んでるときは相殺しません。

それではもうひとつの例を見てみます。今度の場合は、入れ子関係にあるときのマージンの相殺です。

②マージンの相殺：入れ子関係の場合

何だかこんがらがってきましたねー … さっきは上下に隣り合ったマージンは相殺されるって言ってたのに、上の図では相殺されずに足し算されてるようにも見えます…。 でも、20px と 30px を足しても 50px だし … 少し整理してみましょう。

まず、上のボックス 1と下のボックス 2間のマージンは、相殺されて 30px になります。これは例 1の時と同じですね！間違いありません。ではなぜふたつのボックスの間が 60px になってしまうのでしょう？これはまた別の所でマージンの相殺が起こっているからなんです。

それが前述した「入れ子関係時の場合は、border や padding がお互いのマージンの間にない場合にマージンの相殺が起こります。」の部分 … つまり、下の div 要素 2 2と、その中に入っている h2 要素 3の間でもマージンの相殺が起こっているんですねー。

div 要素2 2には padding も border も指定していませんし、h2 要素 3も同様です。つまりこのふたつの要素のマージンは、接し合ってる状態なんですねー。そこで相殺してしまうと … まるで div 要素の margin-top が 60px であるかのようになってしまうんです！

下の図は、ブラウザで見たときの感じです …。

入れ子状態でのマージンの相殺

 

 

div 要素2 に内包されている h2 要素 3に指定したマージンが、まるで div 要素2 2を突き抜けて、上の div 要素1 1と相殺している感じに見えますねー。

h2要素 3に指定したマージンを、下の div要素2 2との間に設定したい場合には … 間にパディングを入れたり、ボーダーを入れたりすれば OK ということでしたね！

間にボーダーを入れると、マージンの相殺はしない

 

 

div 要素2 に内包されている h2 要素 3に指定したマージンが、まるで div 要素2 2を突き抜けて、上の div 要素1 1と相殺している感じに見えますねー。

h2要素 3に指定したマージンを、下の div要素2 2との間に設定したい場合には … 間にパディングを入れたり、ボーダーを入れたりすれば OK ということでしたね！

間にボーダーを入れると、マージンの相殺はしない

 

 

 

フロートさせた要素は、通常フロー（流れ）から外されて、新たなフローを作る …つまり同一上の流れの中に入ってないんですねー。なので相殺されないで、ちゃんとマージンが足し算されています。

さて、通常のフロー（position: static）での配置を見てきました。改めておさらいしても、特に難しい事は無かったと思います …。でもここで登場した、通常フローや行ボックスという言葉は、フロートや相対配置、絶対配置などのところでも登場します。またマージンの相殺についてもキチンと押さえておきたいですね！

それではいよいよ通常の通常フロー以外の配置、まずはフロートについて見ていきましょう。

「CHECK POINT」
・上下に隣り合ってる要素通しには、マージンの相殺が起こります。
・入れ子関係にある場合も、マージンの相殺が起こる場合があります。
・フロートした要素のマージンは相殺されません。