Måttenheter i CSS

Vi har nu tittat på ett par CSS-egenskaper som är viktiga för att kunna skapa layout, det är width och height. Dessa används för att styra bredd och höjd på block-element. För att kunna använda oss av dessa på ett bra sätt måste vi lära oss lite om de olika måttenheter som är tillgängliga i CSS.

Den första enhet som vi ska titta på är ”px”, vilket är en CSS-pixel. Definitionen för en ”px”, skiljer sig lite ifrån vad vi vana att en pixel är...

Pixel

Som du kanske vet är en pixel ett bildelement på skärmen. Varje pixel byggs upp av minst tre sub-pixlar, en röd, en grön och en blå. När dessa lyser i olika styrka så bildas olika färgkombinationer. Pixlarna är så små, och ligger så nära varandra, att du oftast inte kan urskilja dem med blotta ögat. Tillsammans bildar dessa pixlar det innehåll du ser på skärmen. En vanliga HD-skärm har 1920 x 1080 pixlar.

== px CSS px är inte det samma som en pixel på en vanlig skärm. Då olika skärmar har olika egenskaper, de är olika stora, de har olika upplösning osv. Pga detta kan det skilja sig stort på vad en pixel är ifrån skärm till skärm. Därför har W3C valt att definiera px på så sätt att den blir mer oberoende av olika typer av hårdvara och mer likformig.