Ako keby nestačilo, že žiadny browser sa nespráva celkom podľa (chaoticky prekomplikovanej) špecifikácie CSSka, občas máte tú česť naraziť na divné správanie, ktoré zámerne vytvorili jeho autori. Dnešný príklad -keď dáte obrázok do vnútra div elementu, na spodku sa vytvorí medzera. Prečo sa to deje a prečo by mi to malo vôbec vadiť?

Strihal som CSSko s dizajnom, kde má byť pod obrázkom aktuálne veľmi obľúbené "zloženie" za pozadie (ako vidíte na obrázočku vľavo hore). Tak si hovorím, že šak pohoda, spravím div s paddingom na spodku, v ktorom bude ako pozadie ten šedý cicík™ a posuniem celý div doľava. V tomto div-e by potom mohol byť hocijaký obrázok a bol by pekne ocicíkovaný.

.obrazok_s_cicikom {
	float: left;
	padding-bottom: 5px;
	margin-bottom: 8px;
	position: relative;
	left: -6px;
	background: transparent url('cicik.png') 0% 100% no-repeat;
}

No a tu prichádza zrada, cicík je posunutý o 3 pixely nižšie! Pôvodne som myslel, že to je nejaký bug browseru, ale ukázalo sa, že sa rovnako správa vo Firefoxe, Chrome, Opere a dokonca aj IE. Obrázok mal veľkosť 83, div 86. Tak skúšam vypínať bordery, paddingy, marginy, aj keď viem, že tam aj tak nie sú. Zo zúfalosti nahodím celý CSS reset a stále nič.

Po chvíli hľadania som sa dopátral k zaujímavému zisteniu. Obrázok natiahne div preto, že je braný ako inline element, ktorý sa snaží byť zarovno základnej čiary textu (baseline). Text je ale beťár a niektoré znaky má pod touto čiarou (malé "p", "q", "g", ...), takže div sa pre istotu roztiahne.

Divné. Obrázok síce nie je zrovna text, ale v podstate to dáva zmysel.

Čo sa s tým dá teda robiť? Buď spraviť z obrázku "nie-text" (.obrazok_s_cicikom img { display: block; }) alebo, ešte lepšie, nastaviť ho na najspodnejšiu úroveň textu (.obrazok_s_cicikom img { vertical-align: bottom; }).

Tak, tam máš záhada, práve si bola objasnená! Nabudúce si povieme niečo o ešte väčšej a častejšej záhade, o margin collapsingu.