Yazılım Örnekleri

CSS Genişlik ve Yükseklik Sınırlamaları

Bir nesnenin yüksekliğini (height) ve genişliğini (width) kodlarını kullanarak belirleriz. Width ve height değerleri  piksel, punto, yüzde gibi ölçüler verebiliriz.

 
.kutumuz {
width: 200px;
height: 200px;
}

Bu classı kullandığımız elementimiz 200x200 lük bir alanda yer alacaktır.

En Düşük Genişlik ve Yükseklik Değeri

Kullanacağımız nesnelerin minimum yani en düşük sahip olacağı genişliği için min-width, en düşük sahip olacağı yükseklik için de min-height kodlarını kullanırız.

Kod:
.kutu {
min-width: 200px;
min-height: 200px;
}
Yukarıdaki örneğimizda elementimiz, içi boş olsa bile 200x200 lük yüksekliğe ve genişliğe sahip olacaktır.

En Yüksek Yükseklik ve Genişlik Değeri

Kullanacağımız nesnelerin maxsimum yani en yüksek sahip olacağı genişliği için max-width, en yüksek sahip olacağı yükseklik için de max-height kodlarını kullanırız.

Kod:
.kutu {
max-width: 300px;
max-height: 300px;
}
Yukardaki bu örneğimizde ise bu değerlere sahip elementimizin yüksekliği 300 pikseli, genişliği 300 pikselden fazla olamaz. Eğer içeriğimiz, bu lementimiz maximum yükseklik ve genişlik değerlerinden fazla olursa bu elementimizden taşacaktır.

Bu taşma durumlarında overflow özelliğini kullanabilirsiniz. Overflow özelliğini görmek için "Overflow ile Taşan Element , Yazı ve Divleri Düzeltme" başlığını inceleyebilirsiniz.