質問のものは、 vertical-align を調整することで 挙動を調整できます。
理由ですが、これはデフォルトの vertical-align: baseline
の設定が作用しているためで、「通常であれば、文字の垂直位置」が対象になるところ、 overflow:hidden
が指定されたことによって、「要素ボックスの垂直位置」が対象になったためです。
CSS 2.1 仕様の 10.8.1 の最後で以下のように規定された動きからきています。
The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.
参考: Stackoverflow, CSS inline-block causing extra space between 2 vertical divs
以下、サンプルを挙げます。
span,
div {
border: 1px solid red;
}
<h3>問題の構造</h3>
<div>■■<span style="display: inline-block"><div style="overflow: hidden;">□□</div></span>■■</div>
<h3>問題の構造 (さらに単純化)</h3>
<div>■■<span style="overflow: hidden; display: inline-block;">□□</span>■■
</div>
<h3>変更: hidden 無し</h3>
<div>■■<span style="display: inline-block"><div>□□</div></span>■■</div>
<h3>変更: vertical-align: top</h3>
<div>■■<span style="display: inline-block; vertical-align: top;"><div style="overflow: hidden; ">□□</div></span>■■</div>
<h3>変更: vertical-align: bottom</h3>
<div>■■<span style="display: inline-block; ; vertical-align: bottom;"><div style="overflow: hidden">□□</div></span>■■</div>
以上の例は jsFiddle にも置きました。
display: inline-block
と div3 のoverflow: hidden
どちらか片方でも欠けると、div1 の高さが div2, div3 と等しくなるのにも関わらず、両方が揃うと異なってしまうことが疑問、ということで良いでしょうか。OKならば、本文にその旨記載しておくと、読んだ人が理解しやすくなると思います。