margin: auto;の正体を暴く

こんにちは。htmlの要素を中央揃えするためにmargin: autoを指定したけど効かない！ってことよくありますよね。

今回は、margin: auto; がそもそも何なのか、その正体を暴いていきます。

追記：応用編を書きました。postion: absoluteと併用した場合にどうなるかを詳しく解説しています。

margin: auto;とposition: absoluteを組み合わせて特殊な中央揃えをする

こんにちは。今回はmargin: auto;をさらに深めていこうと思います。margin: auto;での中央揃えが何故動くのか、基本的なことはこちらをご覧ください。position: abusolute;との併用による中央揃えmargin...

itokoba.com

2021.11.06

margin: auto; はそもそも何？

margin: auto;はショートハンドと呼ばれる書き方で、top/bottom/left/rightを同時に指定します。つまり下のコードと同義です。

margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;

４方向全てがautoになります。

marginの値がautoになるとどうなる？

marginの値がautoになると、余ったmarginを吸収します。どういうことか画像と合わせて説明します。

空白はmarginとして扱う

例えばこのように正方形の要素があるとします。

<div class="Block"></div>

.Block {
  width: 150px;
  height: 150px;
  background-color: blueviolet;
}

この要素にmargin-left: auto;を追加すると以下のようになります。

なぜこうなるかというと、divのようなblock要素は右側の空白をmarginとして扱っているからです。

これが余ったmarginです。よってmargin-left: auto;とするとこのmarginが全て左側に移動します。

要素が右に寄ったのではなく、marginが左に寄ったのです。

数値で指定されたmarginがある場合

autoが吸収するのは余ったmarginなので、数値指定された分はそのままです。下はmargin-right: 100px; を追加した例です。

.Block {
  margin-left: auto; 
  margin-right: 100px; //これを追加
  width: 150px;
  height: 150px;
  background-color: blueviolet;
}

指定されていた分は右にそのまま残ります。

autoが複数あった場合

では、値がautoになっている部分が複数あったらどうなるでしょう？

その場合、余ったmarginはautoの部分に均等に振り分けられます。これがmargin: auto;で要素が中央に配置される理由です。

上の要素のmargin-rightをautoにしてみましょう。

.Block {
  margin-left: auto;   
  margin-right: auto;   //ここを変更
  width: 150px;
  height: 150px;
  background-color: blueviolet;
}

このようにmarginが左右に均等に振り分けられました。結果的に要素が中央に配置されます。

margin: auto; は margin-left: auto; と margin-right: auto; を含んでいるので要素を中央揃えさせることができるというわけです。

margin: auto; がなぜ効かないのか

さて、block要素がmargin: auto;によって中央揃えされる理由はわかりました。でもmargin: auto;が効かない時もありますよね。なぜでしょうか？

答えは単純です。block要素でないとmarginが余ってないんです。

例えばaタグのようなinline要素。デベロッパーツールで見るとこうなっています。

右側にオレンジの領域がありません。余ったmarginがない以上、autoにしても吸収できません。これがmargin: auto;が効かない理由です。inline-blockも同様です。
margin: auto; で要素を中央揃えさせたければdisplay: block; にしましょう。

まとめ

ということで、margin: auto; が一体何者かを説明しました。

• margin:auto; は余ったものを吸収する。
• 数値で指定された分はそのままになる。
• 複数autoがあると、それらが均等に分ける。

でした。これであなたも２度とmargin: auto; で困ることはないでしょう！

marginとpaddingの使い分けについてはこちらをご覧ください。

余白はいつ生まれるのか

はい。今回はタイトルの通り余白が生まれるタイミングは一体いつなのかを考えていきます。これを理解すれば、marginとpaddingのどっちを使うのが正しいか、あるいは他の方法を使うべきかを判断する基準を持つことができると思います。より質の高...

itokoba.com

2022.06.04

marginとpaddingの違いと正しい使い分け方を完全解説

こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。要素の外側はmarginで内側はpaddingという説明もされたりしますが、そうは言っても実際のコードを書くと迷ってしまいませんか？そんなmarginと...

itokoba.com

2022.04.13