CSS Yükseklik ve Genişlik

CSS Yükseklik ve Genişlik

CSS yükseklik ve genişlik özellikleri, bir öğenin yüksekliğini ve genişliğini ayarlamak için kullanılır.

CSS max-width özelliği, bir elemanın maksimum genişliğini ayarlamak için kullanılır.

Yükseklik ve genişlik özellikleri iç boşluk (padding), kenarlık (border) veya kenar boşluklarını (margin) içermez. Öğenin iç boşluk (padding), kenarlık (border) ve kenar boşluklarını (margin) içindeki alanın yüksekliğini/genişliğini ayarlar.

CSS Yükseklik ve Genişlik Değerleri

Yükseklik ve genişlik özellikleri aşağıdaki değerlere sahip olabilir:

• auto - Bu varsayılandır. Tarayıcı yüksekliği ve genişliği hesaplar.
• length - Yüksekliği/genişliği px, cm vb. cinsinden tanımlar.
• % - İçerdiği bloğun yüzdesi olarak yüksekliğini/genişliğini tanımlar.
• initial - Yüksekliği/genişliği varsayılan değerine ayarlar.
• inherit - Yükseklik/genişlik üst değerinden devralınır.

Örnek:

Bir <div> öğesinin yüksekliğini ve genişliğini ayarlama:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Örnek:

Başka bir <div> öğesinin yüksekliğini ve genişliğini ayarlama:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Maksimum Genişlik Ayarı

max-width özelliği, bir elemanın maksimum genişliğini ayarlamak için kullanılır.

Maksimum genişlik, px, cm vb. gibi uzunluk değerlerinde veya içeren bloğun yüzdesi (%) olarak belirtilebilir veya hiçbiri olarak ayarlanabilir (Bu varsayılan ayardır. Maksimum genişlik olmadığı anlamına gelir).

Yukarıdaki <div> ile ilgili sorun, tarayıcı penceresi öğenin genişliğinden (500 piksel) daha küçük olduğunda ortaya çıkar. Tarayıcı daha sonra sayfaya yatay bir kaydırma çubuğu ekler.

Bunun yerine maksimum genişlik kullanmak, tarayıcının küçük pencereleri işlemesini kolaylaştıracaktır.

Not: Herhangi bir nedenle aynı öğe üzerinde hem width özelliğini hem de max-width özelliğini kullanırsanız ve width özelliğinin değeri max-width özelliğinden büyükse; max-width özelliği kullanılacaktır. (width özelliği yok sayılacaktır)

Örnek:

Bu <div> öğesinin yüksekliği 100 piksel ve maksimum genişliği 500 pikseldir:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}