RYO.dev

最終更新日:

display: inline-blockを指定した要素にmargin: 0 auto;を指定しても中央揃えにならないのはなぜ?

  1. 仕様書によると
  2. デベロッパーツールで確認
  3. フィードバック

仕様書によると

上の図形は2つのdiv要素で構成されています。枠線の図形はdiv.parent、青背景の図形はdiv.childrendiv.parentdiv.childrenの親要素になっています。

div要素には次のCSSを指定しています。

.parent {border: 1px solid #787878;}
.children {
  background: #1E88E5;
  height: 100px;
  margin: 25px auto;
  width: 100px;
}

div要素のdisplayプロパティの初期値はblockです。ここで、div.childrendisplay: inline-block;を指定するとこうなります。

なぜでしょう?

...仕様書を見てみましょう。

まずは、Snapshotと呼ばれるページを見てみます。SnapshotについてW3Cでは次のように説明しています

For software makers, there is an easy way to know what parts of CSS should be implemented and what parts not yet. Since 2007, the working group publishes so called snapshots, which explain exactly that.

Levels, snapshots, modules…

今()のところのSnapshotの最新版はSnapshot 2018ですが、これはつまり、2018年時点でのCSSの状態を形成するすべての仕様をまとめているということです。なお、Snapshotの最新版は常に「https://www.w3.org/TR/CSS/」というURLで確認できます(ソース)。

さて、次にSnapshotのProperty Indexを見ます。CSSプロパティがたくさん並んでいます。その中の「margin」をクリックします。すると、8.3 Margin propertiesの中の項目に飛びます。少し上にスクロールすると、The properties defined in this section refer to the <margin-width> value type, which may take one of the following values:という文言に続いて3つの値が紹介されています。今回知りたいのはautoの挙動なので、「auto」の項目を見ます。See the section on calculating widths and margins for behavior.と書いてあるので、指示に従ってそちらのページに移動します。

10.3 Calculating widths and marginsという項目に飛びました。今回は、display: inline-block;を指定した要素のmarginの値にautoを指定したときの挙動について知りたいです。また、div要素は置換要素(replaced elements)ではありません。ということで、10.3.9 'Inline-block', non-replaced elements in normal flowの項目を見ます。

その中には次のように書いてあります。

A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

Visual formatting model details

ふぅ...。やっと核心に到着しました。

つまり、display: inline-block;を指定した要素のmargin-leftもしくはmargin-rightの値にautoを指定すると、値は0と解釈されるということです。

デベロッパーツールで確認

ChromeのデベロッパーツールのElementsパネルのComputedタブを使います(詳しい使い方はこちら)。まずは、display: inline-block;を指定する前のdiv.childrenmarginの値を確認してみましょう。

displayプロパティの値がblockで、marginプロパティに25pxとautoの2つの値を指定したdiv要素のmarginの計算値
margin-topmargin-bottomの値は指定した通りに25pxになっています。margin-rightmargin-leftの値はもろもろの計算をした結果260.038pxという値が指定されたみたいです。ここの値は画面幅(正確には親要素の幅)が変わると値が変わります。

次に、display: inline-block;を指定した状態を見てみます。

displayプロパティの値がinline-blockで、marginプロパティに25pxとautoの2つの値を指定したdiv要素のmarginの計算値
margin-topmargin-bottomの値は先ほどと同じく、指定した通りに25pxになっています。しかし、margin-rightmargin-leftの値は0pxになっています。

仕様書通りですね。display: inline-block;を指定した要素のmargin-leftもしくはmargin-rightの値にautoを指定すると、値は0と解釈されます。

フィードバック

もし誤った情報を見つけたりお聞きしたいことがあったりした場合は、TwitterのDMメールにご連絡ください。