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.

Rámeček v obrázku ve Webkit

Ve webkit prohlížečích (Chrome, Opera, atd.) se může kolem obrázku zobrazit 1px rámeček, který nejde odstranit nastavením border ani outline (rámeček se ve skutečnosti zobrazuje mezi border a background).

Rámeček zobrazuje renderovací jádro v případě, že prvek IMG nemá nastavený src a upozorňuje tím na tento fakt.

Pokud tedy chcete zobrazit obrázek přes CSS background, nepoužívejte prvek IMG ale např. DIV.

Pokud ale přeci jen potřebujete použít obrázek, stačí jeho velikost nedefinovat přes width a height, ale přes padding:

/* Tohle zobrazí rámeček ve Webkit */
img.icon {
    width: 32px;
    height: 32px;
    border: 0 none;
    background: ...;
}
/* Tohle funguje správně */
img.icon {
    width: 0;
    height 0;
    padding: 16px; /* polovina velikost */
    background: ...;
}

Do paddingu musíte zadat polovinu požadované velikosti, protože se započte dvakrát (levý + pravý a horní + dolní). Alternativně byste museli nastavit jen jeden rozměr a druhý nastavit na nulu: padding: 32px 0 0 32px (nastaví jen horní a levý padding).

Třetí možnost by byla nastavit src na nějakou hodnotu. Pokud ale nastavíte neexistující obrázek (např. src="#"), zobrazí prohlížeč, že obrázek neexistuje (přeškrtnutá ikona obrázku), takže byste museli nastavit skutečný obrázek, např. průhledný 1px GIF, ale v tomhle případě se bude obrázek buď stahovat, a bude zbytečně zdržovat zobrazení stránky, nebo byste museli uložit obrázek v BASE64 přímo do HTML, a pak zase zbytečně zvětšujete velikost stránky a opět zdržujete její stažení a zobrazení. Lepší je tedy použít první nebo druhou možnost.