@@JürgenB

Bei der problematischen Seite soll das rosa Div nur so breit sein, wie sein Inhalt, und nicht die durch max-width gesetzte Breite einnehmen.

Fun fact: An sowas war ich auch gestern erst dran: Elfe im Wald.

Leider gelingt mir das nicht, wenn der Text im DIV umbricht.

Ja, das ist bei fit-content so, dass die Box bei mehrzeiligem Inhalt über die volle Breite (bei mir Höhe) geht.

Das Problem (oder wie man in Neusprech sagt: die Herausforderung) hatte ich bei der Wochenende-Bühne auch: Wenn da nicht nur „Wochenende“ steht, sondern die Überschrift mehrzeilig wird, beansprucht deren Box die volle Breite und reißt durch ihren weißen Hintergrund eine zu breite Lücke in den Rahmen.

Die Lösung ist, nicht einem Blockelement die Hintergrungfarbe zu geben, sondern einem Inline-Element – mit box-decoration-break: clone (TIL about coming downstairs), damit’s dann so aussieht: Die ganze Welt ist eine Bühne.

Das auf den Bildnachweis angewandt: Elfe mit box-decoration-break: clone.

Transparente Hintergrundfarbe ist problematisch: Die Höhe der Zeilenboxen hängt vom verwendeten Font ab. (Von dem tatsächlich auf dem jeweiligen System des Nutzers verwendeten, versteht sich.) Das heißt, bei denselben Angaben zu Schriftgröße und Zeilenabstand können die Zeilenboxen im Idealfall genau aneinander passen oder auch eine Lücke lassen oder sich überlappen.

Bei opaker Hintergrundfarbe lässt man sie dann überlappen (padding-block) und hat eine gleichmäßig gefüllte Fläche.

🖖 Live long and prosper