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.
English-only | Jenom česky | Bilingual/Dvojjazyčně
CSS Hack: Řádkové bloky
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:
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).
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 ) (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".