margin: auto;の正体を暴く

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。今回は要素の中央揃えによく使われるmargin: auto; がそもそも何なのか、その正体を暴いていきます。

目次

margin: auto; はそもそも何?

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

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

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

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

空白はmarginとして扱う

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

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

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

デベロッパーツールから確認した状態。marginはオレンジで表される。

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

margin-left: auto;の状態

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

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

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

margin-left: auto; かつ margin-right: 100px; の状態

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

autoが複数あった場合

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

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

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

margin-left: auto; かつ margin-right: auto;

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

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

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

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

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

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

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

まとめ

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

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

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

この記事を読んだ方におすすめの記事

チェックボックスとラジオボタンのデザインをCSSで変更する方法を超絶優しく解説する

2019年7月18日

HTMLにおける、上手に比率維持した画像を作る方法(imgタグ/background-image)

2019年6月4日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください