タイトルのとおりなのですが、うっかりしそうな内容だったので記事にします。
インラインブロックの下マージンがずれる
きっかけは teratail のこの質問でした。
「インラインブロックの下マージンがずれる」という問題で、なかなか理由がわからなかったのです。
<div class="empty"></div>
<br>
<div> </div>
<br>
<div> </div>
div {
display: inline-block;
width: 10em;
height: 1em;
box-sizing: border-box;
border: 1px solid;
margin-bottom: 1em;
}
.empty {
border-color: red;
}
スクリーンショットのとおり、下マージンよりも大きい余白があります。
「改行の問題だろう」と当たりをつけたのですが、そうだとしても空白文字を入れるだけで解消されてしまうのは解せない感じでした。
ベースラインの問題
改行タグを削除してみたところ、こうなりました。
明らかにベースラインの問題のように見えたのでググったところ、このような仕様が。
If an atomic inline (such as an inline-block, inline-table, or replaced element) does not have a content-derived baseline set in the inline axis of the inline formatting context in which it participates, then the UA must synthesize its baselines as follows in order to align it.
These baselines are assumed to be at its line-under margin edge:
A.3: Synthesizing Baselines for Atomic Inlines | CSS Inline Layout Module Level 3
ということで、空のインラインブロックや画像でマージンの下端に揃ってしまう現象が起きるということでした。
件の質問は<br>が入っていたため、そのベースラインがマージン下端に揃って下がってしまい行ボックスが大きくなったため、その分だけ下に余白ができた、ということのようです。
なお、画像で試したところ問題が再現したのですが、空の<input>では再現しませんでした。
その理由はまだわかっていないです。