CSS Genişlik ve Yükseklik Özelliği

0 293

Elementlerin ölçülendirme işlemlerini yani genişlik ve yükseklik ayarlarını CSS içerisinde width ve height özellikleri ile sağlıyoruz.Height özelliği elementlerin yüksekliklerini , width özelliği de genişliklerini ayarlamada kullanılır.

Genişlik ve yükselik özelliklerine vereceğimiz değerlerde CSS uzunluk birimlerini kullanırız.Aksi takdirde tarayıcının, genişlik ve yükseklikleri otomatik olarak hesaplamasını istersek auto değerini kullanabiliriz.Auto özelliği gerçek projelerde genelde yükseklik için kullanılır.

Not: Width ve Height özellikleri blok düzeyindeki elementlere uygulanabilir.Satır düzeyindeki elementler genişlik veya yükseklik alamazlar.Blok ve satır düzeyi elementleri anlamak için yazıya gidebilirsiniz.

Not: Çoğu zaman elementlerin sayfada yer kapladığı alan ile boyutları karıştırılır.Oysa bir elementin boyutu ile sayfada yer kapladığı alan çoğunlukla farklıdır.Eğer elemente ait padding (iç boşluk), margin (dış boşluk) ve border (kenarlıklar) değerleri varsa sayfada kapladığı alan boyutundan farklıdır.

Aşağıdaki örnekle bu durumu açıklayalım.

Yukarıda örnekte elemente genişlik olarak 200px verilmiştir fakat her iki yanına 4px değerinde kenarlık geldiği için bu elementin sayfada kapladığı alan genişlik olarak 208px ölçüsündedir.Aynı şekilde 100px yükseklik verilmiş üst ve alt tarafında 4px değerinde kenarlık olduğu için sayfada kapladığı alan yükseklik olarak 108px ölçülerindedir.

Max-width Özelliği

Bir elementin alabileceği maksimum genişlik değerini ifade etmek için max-width özelliği kullanılır.

Max-Width Neden Kullanılır?

Eğer elementin genişliği tarayıcı penceresinden büyük ise ekranın altında scrollbar(kaydırma çubuğu) çıkar ve elementi tam görebilmek için o çubuğu kaydırmanız gerekir.Özellikle ekranının çok küçük, elementin genişliğinin çok büyük olduğu durumlarda bu kaydırma sıkıntı oluşturur.
Bu gibi durumlarda o elemente alabileceği en yüksek genişlik değeri verilerek ekran genişliğine göre ayarlanmasını sağlayabiliriz.

Örnekte elementimizin genişliği 2000px, bu değer bir çok ekran için geniştir ve kaydırma çubuğu çıkarır.Ama biz max-width genişliğine 100% değeri verdiğimizde, bu element ekrana tam sığacaktır.

Not: Max-height özelliği elementin alabileceği maksimum değeri vermek için kullanılır.Fakat max-height özelliğinin kullanılabilmesi için o elemente height (yükseklik) değeri verilmesi gerekir.

İlave
Min-width özelliği elementin alabileceği en küçük genişlik değerini vermek için kullanılır.Aynı şekilde min-height özelliği de alabileceği en küçük yükseklik değeri belirtmek için kullanılır.

CSS de genişlik ve yükseklik kavramları hakkında içerik oluşturduğumuz bu dersimiz de CSS width ve height özelliklerinin ne işe yaradığı ve nasıl kullanıldığını anlattık.Ayrıca responsive tasarımlarda sıkça karşımıza çıkan max-width, min-width, max-height, min-height özelliklerinin de ne için ve nasıl kullanıldığını anlattık.100% genişlik değeri ile bir örnek oluşturduk.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin