@@mark > Lösungsansätze: Ich hab die mal [in einem Pen skizziert](http://codepen.io/gunnarbittersmann/pen/jbQbXq?editors=100). **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_{: lang="en"}; 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 `margin`s, 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 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@mark > Lösungsansätze: Ich hab die mal [in einem Pen skizziert](http://codepen.io/gunnarbittersmann/pen/jbQbXq?editors=100). **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 Bespiel 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_{: lang="en"}; 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 `margin`s, 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 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@mark > Lösungsansätze: Ich hab die mal [in einem Pen skizziert](http://codepen.io/gunnarbittersmann/pen/jbQbXq?editors=100). 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 Bespiel 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_{: lang="en"}; 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 `margin`s, 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 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)