Odstranění mezery za elementem DIV

31. 7. 2015, Vladimír Klaus, přečteno 1684x

HTML/CSS

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?

Odstranění mezery v divu 1

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.

Odstranění mezery v divu 2

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