10.marginについて本当に理解している？ ～最低限確保する距離～
marginとは
前回の記事でも書きましたが、
paddingは「領域の確保」
marginは「最低限確保する距離」が妥当な表現かなと思います。
一般には「margin」は「padding」とセットで
「外側の余白・内側の余白」と言われています。
私はこの捉え方は混乱を招くと思います。（私が混乱した）
その上、調べるとmargin:autoや0、右寄せに関する情報は
誤情報が記載されている記事も見られました。
仮に、情報が間違っていなくても、「何故そうなるのか」までは書いていないのです。
なんだろう。
すごい、モヤモヤ。
ということで、検証も含め今回はmarginについて、まとめていきたいと思います。
marginが距離の確保ってどういうこと？
では、ここで問題です。
以下のスタイルを適用した「div」要素の位置はどうなるでしょう。
- width:100px;
- height:100px;
- margin-right : 0px;
marginは「外側の余白」ってことは
右側の外側の余白が０pxだから、これでしょ！楽勝！
・
・
・
・
と思った、そこのあなた！
これは間違いです。
正しくは、
これです。
うそやん、だって外側の余白って言ったやん、右側の余白0pxじゃないやん！(誰
では、何故こんな摩訶不思議な自体が発生しているのか。
理由は主に２つあると、私は考えます。
- 要素配置の挙動
- marginの初期値
では１つずつ見ていきます。
要素配置の挙動
なんでも良いので、bodyタグの中に「要素」を書くとします。
仮に
<p>test</p>
としましょうか。
その時「要素」は、左側に配置されます。
「今更、何を当たり前なことを。」
と思っているそこのあなた！
要素は基本的に左から配置される。
この性質、今一度しっかり頭に入れておくべきだと思います。
marginの初期値
初期値を意識したことって、あまりないと思います。
marginの初期値は基本的に全方向 0 です。
特に指定していないので、当たり前と言えば当たり前ですよね。
２つの理由から考えると？
- 要素は基本的に左から配置される
- marginの初期値は0
この２つから、
margin-right:0pxを設定しても、元々0なので要素の位置は変わらない。
ということが、わかると思います。
そして、「外側の余白」という表現とズレが生じているのも
感じていただけたと思います。
ようやく冒頭申し上げた、
marginは「最低限確保する距離」の意味の説明に入っていきます。
marginは最低限確保する距離
ということで、前置きが長くなりましたが、今日の本題です。
勘の良い方は何となく私の言いたいことがわかっているのではと思います。
先程の例で説明していきます。
margin-right : 0px;
を言葉で指示するなら、
「右側の要素との距離を0px以上、確保しろ」
になると思います。
そう、0px以上確保・・・
0px以上であれば、10pxだろうが100pxだろうが、OKということなのです。
これが、「最低限確保する距離」と言った意味です。
marginの相殺も別に難しくない
「最低限確保する距離」だと捉えたら、
marginの相殺も何も怖くないです。
例えば、「div1」と「div2」と言う要素を２つ横並びにしたとします。
div1にmargin-right:10px
div2にmargin-left:30px
とします。
「他の要素と最低限確保する距離」として、
div1とdiv2に指定されたmarginを言葉で説明すると
-
div1は右側の要素との距離を10px以上確保しろ。
-
div2は左側の要素との距離を30px以上確保しろ。
となります。
そして、ブラウザは次のように判断します。
「div1」は指示通り右隣と10px以上確保した。(黄色部)
「div2」は左隣と10px離れているだけでは、30px以上の指示を満たせない。
なので、30pxになるように距離を確保した。
結果「大きいほうが適用される」ように見えます。
そして、最初の例で出した「margin-right : 0px;で右寄せに動かない」現象も、
最初から右側の要素との距離を0px以上確保しているので、要素が動かない。
と、すんなり入ってくると思います。
ここで一般の「marginは外側の余白」で考えると、
「div1」が右隣に10pxと
「div2」が左隣に30pxで
余白の合計は10+30 = 40px！
と勘違いする原因になりますが、先程から申し上げている通り違います。
そしてこの問題をmarginの相殺と名前を付けて、
大きい方が適用されると言っているのですね。
今日のまとめ
- marginは最低限確保する距離と捉えると混乱しない
- 要素は基本左から配置され、その時marginは基本全方向0
「外側の余白」と覚えて、margin-right:0;で「右の余白が消えないよ」とか
「marginの相殺」って一体何？と言われて混乱するより
marginは「最低限確保する距離」と最初から捉えた方が、
わかりがいいのではと思います。
では、また。
