CSS Height, Width (Yükseklik, Genişlik)

CSS height ve width (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 öğenin maksimum genişliğini ayarlamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 50px;
  width: 100%;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>
 
<div>Bu div öğesinin yüksekliği 50 piksel ve genişliği %100'dür.</div>

</body>
</html>

CSS Yükseklik ve Genişlik Ayarları

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

Yükseklik ve genişlik özelliklerine dolgu, kenarlıklar veya kenar boşlukları dahil değildir. Elemanın dolgusu, kenarlığı ve kenar boşluğu içindeki alanın yüksekliğini/genişliğini ayarlar.

CSS Yükseklik ve Genişlik Değerleri

Height ve width ö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üksekliğini/genişliğini yüzde olarak tanımlar
  • initial – Yüksekliği/genişliği varsayılan değerine ayarlar
  • inherit – Yükseklik/genişlik, ana değerinden miras alınacaktır

CSS Height ve Width Örnekleri

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>
 

<div>Bu div öğesinin yüksekliği 200 piksel, genişliği ise %50'dir.</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</style>
</head>
<body> 

<div>Bu div öğesinin yüksekliği 100 piksel, genişliği ise 500 pikseldir.</div>

</body>
</html>

Not: Yükseklik ve genişlik özelliklerinin dolgu, kenarlıklar veya kenar boşluklarını içermediğini unutmayın! etiketin kendi dolgusu, kenarlığı ve kenar boşluğu içindeki alanın yüksekliğini/genişliğini ayarlarlar!

CSS max-width Ayarlama

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

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

Yukarıdaki

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.

Bu durumda bunun yerine maksimum genişliğin kullanılması, tarayıcının küçük pencereleri işlemesini iyileştirecektir.

Not : İki div arasındaki farkı görmek için tarayıcı penceresini 500 pikselden daha küçük hale getirin.

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 (ve width özelliği göz ardı edilecektir).

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<div>Bu div öğesinin yüksekliği 100 piksel, maksimum genişliği ise 500 pikseldir.</div>

<p>Kodun çalışmasını görmek için tarayıcı penceresini küçültün.</p>

</body>
</html>
16 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir