Obrázek v DIVu bez okrajů

Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.

<div class="imgWrapper">
    <!-- autosize DIV around IMG -->
    <img src="..." />
</div>

To je způsobeno tím, že obrázek je ve výchozím stavu zobrazen jako inline prvek a tudíž jeho rodič (kontejner) musí reagovat na výšku řádky a vertikální zarovnání – které ve výchozím nastavení (baseline) zobrazuje mezeru mezi řádky.

Jednoduchá metoda ošetření je zobrazit obrázek jako blok:

.imgWrapper > img { display: block; }

Pokud potřebujete přeci jen zobrazit obrázek jako inline (např. protože je jich víc vedle sebe), můžete změnit vertikální zarovnání na takové, které nezobrazuje okraje řádky (např. top, middle nebo bottom):

.imgWrapper > img { vertical-align: middle; }

Pokud ani tohle nepomůže, ale nepotřebujete uvnitř kontejneru zobrazovat text ani používat jednotky EM, můžete jednoduše nastavit velikost písma na nulu:

.imgWrapper { font-size: 0; }

Tento způsob ale není příliš dobrý, protože v budoucnu můžete naopak řešit problém, proč se u obrázku nezobrazuje popisek, nebo proč nejde nastavit maximální velikost na 20em když 400px funguje.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *