Mezera pod obrázkem


Problém

text text


Řešení

text text


Popis řešení

Obrázek může vůči okolí nabývat několika pozic. V HTML zápisu je lze nastavit atributem ALIGN. Ten může mít hodnoty: bottom, middle, top, left, right, (texttop, absmiddle, baseline, absbottom).

Pozice left a right slouží k plavání, tedy odsunutí obrázku na stranu a zbylý text je obtéká. V CSS jde o vlastnost float.

Pro tento případ jsou důležitější ty ostatní hodnoty. Výchozí hodnotou je bottom. Ten způsobuje, že se spodní okraj obrázku zarovná s linkou řádku (spodkem písmen). Ovšem některá písmena zasahují pod linku (jpqy). No a toto místo právě způsobuje onu nechtěnou mezeru. Při běžné velikosti písma jsou to zhruba 3 body.

Řešením je tedy nastavit hodnotu zarovnání na jinou. Za sebe doporučuji použít hodnotu middle.

Řešení v HTML
<img src="obrazek.gif" align=middle>

Řešení v CSS:
img { vertical-align: middle; }

Výhodou tohoto řešení je, že ho lze obvykle aplikovat obecně pro všechny obrázky pomocí CSS. V hlavičce nebo menu to pomůže od mezery a v ostatním textu to neškodí. I malý smajlík obvykle vypadá lépe na středu řádku.

Malé obrázky

Pro malé obrázky však ani to nemusí stačit. Je-li velikost obrázku 8 bodů a velikost textu 10 bodů, tak ty dva body opět přesahují. Řešením je tedy zmenšení i okolního písma (font-size).


Alternativní řešení

V CSS je možno přetypovat obrázek z objektu na blok pomocí vlastnosti display. Bloky nemohou mít nastaveno vertikální zarovnání, takže se mezera také nezobrazí. Nevýhodou potom je, že se obrázky chovají jako bloky, takže ukončují řádek před sebou i za sebou a neskládají se tedy přirozeně vedle sebe nebo na řádek s textem. Toho se pak musí dosahovat pomocí plavání nebo pozicování. Na rozdíl od minulého řešení nebývá žádoucí, aby se takto chovaly všechny obrázky, ale třeba jen ty v hlavičce nebo menu, takže je nutné je nějak rozlišit (třeba třídou nebo selektorem potomka).

Samotná aplikace plavání na obrázek mu podle CSS pravidel také způsobí přetypování na blok, takže deklaraci display není potřeba zadávat. U obrázků v odkazech však pochopitelně necháme plavat obalující odkaz a ne obrázek.

Alternativní řešení v CSS:
img.nejaky { display: block; }

.v-nejakem-bloku img { float: left; }


Výchozí chování prohlížečů

Mozilla Firefox, Opera

Mezeru zobrazují jen tehdy, je-li na řádku s obrázkem i text.

Internet Explorer, Google Chrome, Safari

Mezeru zobrazují vždy.


Trejpa 2010 – 2013

Reklama od provozovatele serveru