English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Hack: Řádkové bloky

Ve formátování okrajů (padding) a rámečků (border) řádkových (inline) prvků (em, strong, a, span; cokoli s display:inline) a blokových prvků (hX, p, li, div; cokoli s display:block) je jistý významný rozdíl. Zatímco pozice bloků zahrnuje i rozměry jejich okrajů a rámečků, pozice řádkového prvku zahrnuje pouze vodorovné okraje a rámečky. Ty svislé jsou vykresleny kolem obsahu až poté, co byl prvek umístěn na správnou pozici na řádku.

Block / Blok:

Lorem ipsum dolor sit amet.

Inline:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.


Bohužel MSIE/Win používá toto korektní formátování až od verze 6. Starší verze (5.5, 5 a předchozí) okraje a rámečky kolem řádkových prvků nezobrazují vůbec. Srovnejme předchozí příklad v MSIE5 a MSIE6:

Srovnání formátování inline prvků v MSIE

Obr. 1: Formátování inline prvku z předchozího příkladu v MSIE 5 (vlevo) a MSIE 6 (vpravo)

Nicméně pro MSIE existuje jisté řešení. Pokud totiž prvku nastavíme vlastnost width (která se má u inline prvků ignorovat), IE změní typ prvku na display:inline-block (který je plně podporován prakticky jen v IE). Z pohledu prvku samotného je nyní blokem — ale z pohledu svého okolí je to stále řádkový prvek.

.bordered {
   width: 1em;
   background: yellow;
   padding: 1em;
   border: 1px solid black;
   }
...
<p>
   Lorem ipsum dolor sit amet.<br />
   Lorem ipsum <span class="bordered">dolor</span> sit amet.<br />
   Lorem ipsum dolor sit amet.
</p>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.


Ve skutečnosti se zde nastavená šířka chová jako šířka minimální (min-width). Všechny prohlížeče (kromě IE5) ji budou ignorovat a IE5 roztáhne šířku, pokud bude obsah širší (aspoň dokud v obsahu nejsou zlomitelné mezery — pak je text zalomen na nový řádek).

Řádkový blok v MSIE 5

Obr. 2: Řádkový blok v MSIE 5, s přidaným vertical-align:middle (vpravo nahoře); text obsahující zlomitelnou mezeru (vlevo dole) a bez ní (je použit &nbsp;) (vpravo dole).

Stejného efektu můžeme dosáhnout i nastavením display:inline-block, ale to už by mohly použít i jiné prohlížeče než pouze IE5 (inline-block podporuje IE6 a další prohlížeče mohou v budoucnu). Můžeme rovněž využít i podtržítkový hack a nastavit jím další vlastnosti jen pro IE.

Ve skutečnosti používáme u řádkových prvků jen malé okraje (obvykle jen několik px). Čím menší svislé okraje a rámečky budou, tím podobnější budou inline bloky v IE5 řádkovým prvkům v ostatních prohlížečích. Praktický příklad tohoto řešení najdete v článku "Inline tlačítka".