CSS Yükseklik ve Genişlik

Bu elemanın genişliği %100'dür.

CSS Yükseklik ve Genişlik Ayarları

height ve width Özniteliği, elementin yüksekliğini ve genişliğini ayarlamak için kullanılır.

height ve width özniteliği, iç boşluk, kenarlık veya dış boşlukları içermez. Onlar, elementin iç boşluk, kenarlık ve dış boşluklarındaki alanın yüksekliğini veya genişliğini ayarlar!

CSS Yükseklik ve Genişlik Değerleri

height ve width Özniteliği aşağıdaki değerleri ayarlayabilir:

  • auto - Varsayılan. Tarayıcı yükseklik ve genişliği hesaplar.
  • length - px, cm gibi tanımlar.
  • % - İç bloğun yüzdelik değerleri ile yükseklik/genişlik tanımlar.
  • initial - Yükseklik/genişliği varsayılan değere ayarlar.
  • inherit - Annesinden yükseklik/genişlik değerini miras alır.

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

Bu elementin yüksekliği 200 piksel, genişliği %50

Örnek

<div> elementinin yüksekliğini ve genişliğini ayarlayın:

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

Kişisel olarak deneyin

Bu elementin yüksekliği 100 piksel, genişliği 500 piksel.

Örnek

Başka bir <div> elementinin yüksekliğini ve genişliğini ayarlayın:

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

Kişisel olarak deneyin

Dikkat:Unutmayın ki,height ve width Özniteliği, iç boşluk, kenarlık veya dış boşlukları içermez! Onlar, elementin iç boşluk, kenarlık ve dış boşluklarındaki alanın yüksekliğini/genişliğini ayarlar!

max-width ayarlayın

max-width Özniteliği, elementin en büyük genişliğini ayarlamak için kullanılır.

max-width (en büyük genişlik) olarak uzunluk değerleri (örneğin, px, cm vb.) veya iç bloğun yüzdelik değerleri (%), veya none (varsayılan değer. En büyük genişliği olmaması anlamına gelir) olarak ayarlanabilir.

Tarayıcı penceresi element genişliğinden (500px) küçükse, önceki <div> sorunlarını ele alın. Sonra, tarayıcı sayfaya dikey kaydırma çubuğu ekleyecek.

Bu durumda, max-width Tarayıcıların küçük pencerelerle nasıl başa çıktığını iyileştirebilir.

İpucu:Tarayıcı penceresini 500 piksel genişliğinden küçük bir genişliğe sürükleyerek iki div arasındaki farkı görmek için!

Bu elementin yüksekliği 100 piksel, en büyük genişliği 500 piksel.

Bu elementin yüksekliği 100 piksel, en büyük genişliği 500 piksel.

Yorum:max-width Öznitelik değerleri width（Genişlik）。

Örnek

Bu <div> elementinin yüksekliği 100 piksel, en büyük genişliği 500 piksel:

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

Kişisel olarak deneyin

Daha fazla örnek

Elementin yüksekliğini ve genişliğini ayarlayın
Bu örnek, farklı elementlerin yüksekliğini ve genişliğini nasıl ayarlandığını gösterir.
Görselin yüksekliğini ve genişliğini yüzdelikle ayarlayın
Bu örnek, görselin yüksekliğini ve genişliğini yüzdelik değerle nasıl ayarlandığını gösterir.
Elementin en küçük ve en büyük genişliğini ayarlayın
Bu örnek, elementin en küçük ve en büyük genişliğini piksel değeri ile nasıl ayarlandığını gösterir.
Elementin en küçük ve en büyük yüksekliğini ayarlayın
Bu örnek, elementin en küçük ve en büyük yüksekliğini piksel değerleri ile nasıl ayarlandığını gösterir.

CSS Ölçüm Özelliklerini Ayarlayın

Özellik Açıklama
height Ayarın yüksekliğini ayarlayın。
max-height Ayarın en büyük yüksekliğini ayarlayın。
max-width Ayarın en büyük genişliğini ayarlayın。
min-height Ayarın en küçük yüksekliğini ayarlayın。
min-width Ayarın en küçük genişliğini ayarlayın。
width Ayarın genişliğini ayarlayın。