CSS Height ve Width: Element Boyutlandırma Rehberi

CSS’de height (yükseklik) ve width (genişlik) özellikleri, HTML elementlerinin boyutlarını kontrol etmek için kullanılır. Bu özellikler, bir web sayfasındaki kutuların, resimlerin veya diğer elementlerin boyutlarını sabit veya esnek bir şekilde ayarlamayı sağlar.

Width (Genişlik) Özelliği

width özelliği, bir elementin yatayda ne kadar yer kaplayacağını belirler. Piksel (px), yüzde (%) veya diğer ölçü birimleriyle ayarlanabilir. Örneğin:

div {
  width: 200px;
}

Bu örnek, div elementinin genişliğini 200 piksel olarak ayarlar.

Yüzde kullanarak genişlik belirlemek, elementin içinde bulunduğu kapsayıcıya göre dinamik bir genişlik sağlar:

div {
  width: 50%;
}

Bu durumda, div elementinin genişliği, kapsayıcı elementin genişliğinin yarısı kadar olacaktır.

Height (Yükseklik) Özelliği

height özelliği, bir elementin dikeyde ne kadar yer kaplayacağını belirler. Benzer şekilde piksel, yüzde veya diğer birimlerle ayarlanabilir:

div {
  height: 150px;
}

Bu kod, div elementinin yüksekliğini 150 piksel olarak belirler.

Min-Width ve Max-Width

min-width ve max-width, elementlerin genişliklerinin minimum ve maksimum değerlerini belirlemek için kullanılır:

div {
  min-width: 100px;
  max-width: 500px;
}

Bu ayarlar sayesinde div elementinin genişliği 100 pikselden küçük, 500 pikselden büyük olamaz.

Min-Height ve Max-Height

Benzer şekilde, min-height ve max-height özellikleri ile elementlerin minimum ve maksimum yüksekliklerini ayarlayabilirsiniz:

div {
  min-height: 50px;
  max-height: 300px;
}

Bu özelliklerle, elementler fazla büyümez veya küçülmez ve tasarımınızın düzeni korunur.

Sonuç

CSS height ve width özellikleri, web sayfanızdaki elementlerin boyutlarını kontrol etmenin en temel yoludur. Sabit veya esnek değerlerle elementlerin boyutlarını ayarlayarak sayfa düzenini optimize edebilir ve kullanıcı deneyimini iyileştirebilirsiniz. İyi bir tasarım için, özellikle duyarlı (responsive) tasarımlarda, bu özellikleri yüzde değerleriyle kullanmak önemlidir.