Problem višine vrstic ob uporabi manjših fontov v HTML5

Pri izdelavi spletnih strani v HTML5 jeziku se velikokrat srečamo z uporabo manjšega besedila, ki običajno spremlja normalno besedilo vendar ni enako pomembno. Za uporabo manjšega besedila običajno uporabimo značko <small>, velikokrat pa se zgodi, da je dodeljena višina vrstice prezrta in se uporabi višina vrstica normalnega besedila. Zaradi tega se nam v vsebini dogaja anomalija v obliki večjega razmaka med vrsticami.

Problem nastane, ker so vsi elementi “inline” elementi in posledično povzamejo določena pravila svojega starša ali celopravila. Temu se lahko izognemo tako, da problematičen del “zavijemo” v dodatno značko, še bolje pa je, da želenemu elementu dodamo “display: inline-block”. V praksi to pomeni, da znački <small> dodamo “display: inline-block”. Anomalija se tako odpravi.

Komentiraj


*