Hallo Walter, wie Dir vielleicht aufgefallen ist, ist der Abstand zwischen A und B anders als der Abstand zwischen den übrigen Spans. Das liegt am Zeilenumbruch zwischen den ersten beiden Spans, der als Whitespace sichtbar bleibt. Das ist bei einem inline-Flow einfach so. Ich würde Dir eher raten, für `.alphabet` display:flex zu setzen, die Größe der Buchstabenzellen mit flex-basis festzulegen und den Buchstaben darin mit text-align:center zu zentrieren. Andernfalls sind die spans für I und M sehr unterschiedlich breit. ~~~css div.alphabet { margin-inline: auto; width: fit-content; border: 2px solid red; display: flex; padding: 0.1em 0; span { color:red; flex: 0 0 1.5em; text-align: center; } } ~~~ Je nach Font mag es sein, dass die flex-Basis (Parameter 3 der flex-Eigenschaft) nicht ausreicht, das musst Du in den Entwicklerwerkzeugen kontrollieren. Ein M, das anderthalbmal so breit wie hoch ist, ist aber selten. Ob Du .alphabet mit padding versehen willst, hängt von deinem Layout ab. Ich fand es ohne padding ziemlich gedrängt. Sodann solltest Du darüber nachdenken, was passieren soll, wenn dein Bildschirm zu schmal ist, um alle Buchstaben nebeneinander zu stellen. Ist das div.alphabet so breit wie der Body? Oder ist da noch etwas daneben? Davon hängt ab, ob man eine @media- oder @container-Abfrage machen sollte. [Mit Container sieht es so aus](https://jsfiddle.net/Rolf_b/zb52v34t/) Es wäre gerade für diesen Einsatzzweck wirklich GROẞARTIG, wenn das [flex-wrap:balanced](https://github.com/w3c/csswg-drafts/issues/3070)-Thema endlich mal aus dem Quark käme. Spec- und Implementierungsmäßig. Tab Atkins schlug es schon 2018 vor, aber in den Spec-Drafts ist es noch nicht drin. Ian Kilpatrick von Google (bfgeek) schrieb, er hätte für Blink was in der Pipeline und fast fertig, ich bin sehr gespannt. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Walter, wie Dir vielleicht aufgefallen ist, ist der Abstand zwischen A und B anders als der Abstand zwischen den übrigen Spans. Das liegt am Zeilenumbruch zwischen den ersten beiden Spans, der als Whitespace sichtbar bleibt. Das ist bei einem inline-Flow einfach so. Ich würde Dir eher raten, für `.alphabet` display:flex zu setzen, die Größe der Buchstabenzellen mit flex-basis festzulegen und den Buchstaben darin mit text-align:center zu zentrieren. Andernfalls sind die spans für I und M sehr unterschiedlich breit. ~~~css div.alphabet { margin-inline: auto; width: fit-content; border: 2px solid red; display: flex; padding: 0.1em 0; span { color:red; flex: 0 0 1.5em; text-align: center; } } ~~~ Je nach Font mag es sein, dass die flex-Basis (Parameter 3 der flex-Eigenschaft) nicht ausreicht, das musst Du in den Entwicklerwerkzeugen kontrollieren. Ein M, das anderthalbmal so breit wie hoch ist, ist aber selten. Ob Du .alphabet mit padding versehen willst, hängt von deinem Layout ab. Ich fand es ohne padding ziemlich gedrängt. Sodann solltest Du darüber nachdenken, was passieren soll, wenn dein Bildschirm zu schmal ist, um alle Buchstaben nebeneinander zu stellen. Ist das div.alphabet so breit wie der Body? Oder ist da noch etwas daneben? Davon hängt ab, ob man eine @media- oder @container-Abfrage machen sollte. [Mit Container sieht es so aus](https://jsfiddle.net/Rolf_b/zb52v34t/) Es wäre gerade für diesen Einsatzzweck wirklich GROẞARTIG, wenn das [flex-wrap:balanced](https://github.com/w3c/csswg-drafts/issues/3070)-Issue endlich mal aus dem Quark käme. Ian Kilpatrick von Google (bfgeek) schrieb, er hätte was in der Pipeline und fast fertig, ich bin sehr gespannt. _Rolf_ -- sumpsi - posui - obstruxi