CSS Yüksekliği ve Genişliği
CSS height
ve width
özellikler, 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.
CSS Ayar yüksekliği ve genişliği
ve özellikleri height
, width
bir elemanın yüksekliğini ve genişliğini ayarlamak için kullanılır.
Yükseklik ve genişlik özellikleri dolgu, kenarlık veya kenar boşluklarını içermez. Öğenin dolgu, kenarlık ve kenar boşluğu içindeki alanın yüksekliğini/genişliğini ayarlar.
CSS yükseklik ve genişlik Değerleri
ve özellikleri aşağıdaki değerlere sahip olabilir height
:width
auto
- Bu varsayılandır. Tarayıcı yüksekliği ve genişliği hesaplarlength
- Yüksekliği/genişliği px, cm vb. cinsinden tanımlar.%
- İçerdiği bloğun yüksekliğini/genişliğini yüzde olarak tanımlarinitial
- Yüksekliği/genişliği varsayılan değerine ayarlarinherit
- Yükseklik/genişlik, ana değerinden devralınır
CSS yükseklik ve genişlik Örnekleri
Örnek
Bir <div> öğesinin yüksekliğini ve genişliğini ayarlayın:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Örnek
Başka bir <div> öğesinin yüksekliğini ve genişliğini ayarlayın:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Not:height
and width
özelliklerinin dolgu, kenarlık veya kenar boşlukları içermediğini unutmayın ! Öğenin dolgusu, sınırı ve kenar boşluğu içindeki alanın yüksekliğini/genişliğini ayarlarlar!
Maksimum genişlik ayarı
Özellik max-width
, bir elemanın maksimum genişliğini ayarlamak için kullanılır.
px, cm vb. gibi uzunluk değerlerinde veya içeren bloğun yüzdesi (%) olarak belirtilebilir veya hiçbiri olarak ayarlanabilir (bu varsayılandır. Maksimum genişlik olmadığı anlamına gelir )max-width
.
Yukarıdakilerle ilgili sorun <div>
, 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 kullanmak max-width
, bu durumda tarayıcının küçük pencereleri işlemesini iyileştirecektir.
İpucu: İki div arasındaki farkı görmek için tarayıcı penceresini 500 pikselden daha küçük bir genişliğe sürükleyin!
Not: Herhangi bir nedenle
aynı öğe üzerinde
hem width
özelliği
hem de özelliği kullanırsanız ve özelliğin değeri özellikten büyükse
; özellik kullanılacak (ve
özellik
yok sayılacaktır).max-width
width
max-width
max-width
width
Ö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;
}
Kendiniz Deneyin - Örnekler
Bu örnek, farklı öğelerin yüksekliğinin ve genişliğinin nasıl ayarlanacağını gösterir.
Bu örnek, bir yüzde değeri kullanarak bir görüntünün yüksekliğinin ve genişliğinin nasıl ayarlanacağını gösterir.
minimum genişliğini ve maksimum genişliğini ayarlama Bu örnek, bir piksel değeri kullanılarak bir öğenin minimum genişliğinin ve maksimum genişliğinin nasıl ayarlanacağını gösterir.
minimum yüksekliği ve maksimum yüksekliğinin ayarlanması Bu örnek, bir piksel değeri kullanılarak bir öğenin minimum yüksekliğinin ve maksimum yüksekliğinin nasıl ayarlanacağını gösterir.
Tüm CSS Boyut Özellikleri
Property | Description |
---|---|
height | Sets the height of an element |
max-height | Sets the maximum height of an element |
max-width | Sets the maximum width of an element |
min-height | Sets the minimum height of an element |
min-width | Sets the minimum width of an element |
width | Sets the width of an element |