31.07.2015, Vladimír Klaus, navštíveno 4212x
Pokud do divu vložíte obrázek a takový div orámujete, zjistíte, že tam je mezera. Po zkoumání CSS i obrázku zjistíte, že je vše zdánlivě v pořádku. Dá se tedy tato mezera navíc odstranit?
Ano, dá a velice jednoduše. Je třeba v CSS nastavit příslušnému divu velikost fontu nebo řádkování na 0. Ta mezera je tam totiž kvůli textu, kdy jednotlivé řádky nemohou být na sebe nalepeny. U obrázků je to ale poněkud nechtěná vlastnost.
#site-bannery {
/* aby se nevytvořila 4px mezera za vloženým obrázkem */
font-size: 0;
/* někdy je třeba spíše toto */
line-height: 0;
}Výsledek je pak přesně takový, jako jsme původně očekávali.
Problematika je opět poněkud složitější, může se měnit prohlížeč od prohlížeče apod. Proto doporučuji se podívat na další zdroje, jako třeba tento:
http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements