horizontaler Außenabstand von inline-block Elementen

[Gunnar Bittersmann]

@@mark

Lösungsansätze:

Ich hab die mal in einem Pen skizziert.

Nachtrag: Die darin verwendeten Inline-style-Attribute sollen zur Verdeutlichung dienen. In Produktivcode sollten Darstellungsangaben natürlich nicht inline stehen, sondern im Stylesheet.

Screenshot:

• font-size des Elternelementes auf 0 des setzen und innerhalb der Kind-Elemente (inline1, inline2) wiederherstellen.

Das Problem dabei ist, dass sich Schriftgröße der Kindelemente nicht einfach auf die ihres Großelternelements wiederherstellen lässt; weder em noch inherit kann man verwenden, da sich dies ja auf die 0 beziehen würde.

Einzig rem bleibt (nein, px etc. ist keine Alternative); das bezieht sich aber nicht auf das Großelternelement. In meinem Beispiel wird das Problem deutlich; die Schriftgröße ist zu klein.

Außerdem wird rem von alten Browsern nicht unterstützt. In dem Fall möchte man die Schriftgröße nicht auf 0 setzen. Also wenn diese Methode, dann font-size: 0rem.

• negative margins verwenden. margin-right: -4px. Davon ist eher abzuraten, aber es funktioniert.

Tut es nicht, siehe Beispiel. Du meinst: Davon ist eher abzuraten, weil es nicht funktioniert.

Weder die beim Nutzer verwendete Schriftart noch deren Schriftgröße ist bekannt. Demzufolge kann man nicht wissen, wie breit genau ein Leerzeichen wirklich ist. 4px ist eine magic number; die gilt es immer zu vermeiden.

Auch em hilft hier nicht weiter. Und eine Einheit, die sich auf die Breite des Leerzeichens der jeweiligen Schrift bezieht, gibt es nicht.

• word-spacing der Elemente inline1, inline2 auf 0, oder -1 setzen. Kann mich jetzt nicht mehr genau erinnern, ob das jetzt 0, oder -1 war ...

Weder noch. Sondern eine Längenangabe für die Breite des Leerzeichens (und zwar nicht für die Inline-Block-Elemente, sondern das Elternelement). Dasselbe Problem wie bei negativen margins, also auch nicht brauchbar.

• die Leerstellen und Zeilenumbrüche zwischen den Elementen inline1, inline2 entfernen.

Die Darstellung von der Formatierung des Codes abhängig zu machen, ist keine so gute Idee. Ein anderer Entwickler (oder das eigene Ich, das sich zu einem späteren Zeitpunkt nicht mehr daran erinnert, warum der Code so missgestaltet ist) mag den Code lesbar machen und Zeilenumbrüche einfügen bzw. Kommentare löschen. Ersteres könnte auch ein HTML-Linter tun, letzteres ein HTML-Minifier.

oder ...

Die sinnvolle Lösung verwenden: Flexbox!

(Das in meinem Beispiel zusätzliche div-Element ist nur der Tabelle geschuldet. Normalerweise wird das Elternelement keine Tabellenzelle, sondern ein Blockelement (oder ein Inline(-Block)-Element) sein, dem man display: flex (bzw. inline-flex) verpassen kann.)

LLAP 🖖