По дефолту для текста и inline'овых элементов (в том числе display: inline-block
) стоит значение vertical-align: baseline
, что означает, что выравниваются такие элементы по "нижней границе текста не учитывая выносных элементов (свисающия пиксели у букв типа р, щ и так далее)", эта "базовая линия" высчитывается в зависимости от шрифта и его размера.

В вашем случае, так как у вас не заданы ни позиционирование по вертикали inline'овых элементов, ни высота строки, ни размер шрифта, они берутся "по дефолту". Соответственно высота строки у вас примерно в районе 14-18px в зависимости от шрифта, базовая линия таким образом примерно в районе 2-3px "вверх от низа строки". Итого у вас "доступная" высота из-за ограничения контейнера - 6px, а базовая линия находится на высоте примерно 14px от верха вашего контейнера.

Меняя тип на display: block;
вы убираете эти правила, меняя размер блоков вы так же нивелируете разницу между высотой строки и высотой контентной области. А так как, если высота inline элементов выше высоты строки, то они упираются в верхнюю границу, то у вас получается "круг в центре".
То есть в вашем случае желаемый результат может так же быть достигнут и при .a1 { font-size: 0; }
(так как высота строки будет задаваться в зависимости от высоты вложенного inline-block
элемента, а базовая линия будет являться нижней границей высоты строки)
, а так же при .a2 { vertical-align: top; }
(так как выравнивание уже будет не по базовой линии, а по верхней линии "текста").