Trendovní pozadí textu v CSS

Již nějakou dobu, řekněme několik let, je v různých tiskovinách (např. magazín Level) ale i na webových stránkách k vidění grafický prvek, který bych popsal jako pozadí za textem nekryjící celý odstavec – „obdélník“, ale pouze oblast, nad níž je text. V případě textu zarovnaného do bloku by byl rozdíl logicky vymazán. Jako obvykle, obrázek (a html soubor) to vysvětlí lépe než má slova.

Jak takovéhoto vzhledu docílit? Je zřejmé, že nemůžeme stylovat samotný odstavec p, protože ve výchozím stavu se chová jako blokový prvek. Dovnitř odstavce tedy vložíme jiný, typicky řádkový prvek ? span, který bude taktéž obepínat celý text. Teprve ten se stane objektem stylování.

V prvním kroku přiřadíme spanu background.

p span {background: #cde;}

Funguje to, ale až na jeden detail. Mezi řádky se objevily nepěkné bílé mezery. Spany z principu nezabírají prostor mezi řádky a jejich background do těch míst nesahá. Výchozí line-height odstavce je nějakých 1.2em a vynulování line-heightu není řešením, protože by tím utrpěly praktické, případně i estetické „parametry“. Patřičného efektu docílíme přidáním svislého paddingu spanu.

p span {background: #cde; padding:0.05em 0;}

Řádky splynou, bílé mezery zmizí, máme hotový „cool-back-text“ :-). Padding samozřejmě závisí na nastaveném line-heightu, pokud zadáme hodnotu v em, máme relativní jistotu že splynutí řádků vydrží i při případné změně velikosti textu v prohlížeči.

Html soubor se všemi (třemi) kroky (a s css kódem).