CSS uzunluk birimleri, web sayfalarında elemanların boyutlarını belirlemek için kullanılır. Bu birimler, piksel, santimetre, milimetre, inç, em, rem ve bağıl uzunluk birimlerini içerir. Her bir birimin kendine özgü özellikleri ve kullanım alanları vardır.
Mutlak (absolute) Uzunluk Birimleri
Piksel, santimetre, milimetre ve inç mutlak uzunluk birimleridir. Mutlak uzunluk birimleri, elemanların boyutlarını belirli bir sabit değere göre belirlemek için kullanılır. Örneğin, bir resmin boyutunu belirlerken "width: 200px;" gibi bir kod kullanabilirsiniz. Bu, resmin genişliğinin 200 piksel olduğu anlamına gelir.
Piksel (px)
Piksel, web sayfalarında en yaygın kullanılan uzunluk birimidir. Bir piksel, ekranınızda bir noktaya karşılık gelir ve bu noktanın boyutu, ekranın piksel yoğunluğuna bağlıdır. Bir piksel genellikle birimleri olarak belirtilir ve örnek olarak "font-size: 16px;" şeklinde kullanılır.
Santimetre (cm)
Santimetre, özellikle baskı için tasarlanmış web sayfalarında kullanılan bir uzunluk birimidir. Bir santimetre, 10 milimetre veya 96 piksele eşittir. Örnek olarak "width: 3cm;" şeklinde kullanılır.
Milimetre (mm)
Milimetre, santimetre gibi baskı için tasarlanmış web sayfalarında kullanılan bir uzunluk birimidir. Bir milimetre, 0.1 santimetreye veya 3.779527 piksele eşittir. Örnek olarak "height: 10mm;" şeklinde kullanılır.
İnç (in)
İnç, baskı için tasarlanmış web sayfalarında kullanılan bir uzunluk birimidir. Bir inç, 25.4 milimetreye veya 96 piksele eşittir. Örnek olarak "font-size: 0.5in;" şeklinde kullanılır.
Bağıl (relative) Uzunluk Birimleri
Em ve rem, bağıl uzunluk birimleridir. Bağıl uzunluk birimleri, elemanların boyutlarını diğer elementlere göre belirlemek için kullanılır. Örneğin, bir div elementinin boyutunu başka bir div elementinin boyutuna göre belirlemek istediğinizde "width: 50%;" gibi bir kod kullanabilirsiniz. Bu, div elementinin, üst elementinin genişliğinin yarısı kadar geniş olacağı anlamına gelir.
Em (em)
Em, bir elementin yazı tipi boyutuna bağlı olarak belirlenen bir uzunluk birimidir. Bir em, elementin şu anki yazı tipi boyutuna eşittir. Örneğin, eğer bir div elementi için yazı tipi boyutu 16px olarak belirlenmişse, "margin: 2em;" yazıldığında, 32 piksel uzunluğunda bir boşluk bırakılacaktır.
Rem (rem)
Rem, kök yazı tipi boyutuna bağlı olarak belirlenen bir uzunluk birimidir. Bir rem, sayfanın kök elementinde belirlenen yazı tipi boyutuna eşittir. Örneğin, eğer kök yazı tipi boyutu 16px olarak belirlenmişse, "padding: 1.5rem;" yazıldığında, 24 piksel uzunluğunda bir boşluk bırakılacaktır.