CSS’te “Width” ve “Height” Özellikleri Kullanımı
Bu yazımızda, CSS’te “width” ve “height” özelliklerinin doğru kullanımını ve tasarıma etkilerini ele alacağız. Web sayfalarındaki elementlerin boyutlarını ayarlarken bu özellikler, tasarımın işlevselliği ve görünümü açısından kritik bir rol oynar. Ayrıca, farklı birimler kullanarak bu özelliklerin nasıl daha esnek ve etkili hale getirilebileceğini inceleyeceğiz. Daha verimli bir düzen oluşturmak için bilmeniz gereken temel detayları bu yazıda bulabilirsiniz.
CSS’te “width” (genişlik) ve “height” (yükseklik) özellikleri, kelime anlamlarından da anlaşılacağı üzere bir elementin sırasıyla genişliğini ve yüksekliğini belirlemek için kullanılır. Bu özellikler, elementin kutu modelinin boyutunu hesaplamada kullanılmaktadır. Bakınız:

- Width (Genişlik): Bir elementin yatay boyutunu tanımlar. Varsayılan olarak, genişlik değeri, elementin içeriğinin genişliğiyle belirlenir.
- Height (Yükseklik): Bir elementin dikey boyutunu tanımlar. İçerik sığdırma özelliği yoksa, elementin yüksekliği otomatik olarak içeriğe göre ayarlanır.
“Width” ve “Height” Özellikleri için Kullanılan Ölçü Birimleri
“Width” ve “height” özelliklerini tanımlarken farklı birimler kullanabilirsiniz:
1. Piksel (px)
- Sabit bir ölçüm birimidir.
- Ekran çözünürlüğüne bağlıdır ve kesin bir boyut tanımlar.
- Daha statik tasarımlar için uygundur.
width: 200px;
height: 100px;
2. Yüzde (%)
- Ebeveyn elementin boyutuna göre orantılı bir değer tanımlar.
- Responsive (duyarlı) tasarımlar için idealdir.
width: 50%;
height: 25%;
3. Viewport Birimleri (vw, vh)
- Tarayıcının görünüm alanına göre ayarlanır.
- vw: Görünüm alanının genişliğinin %1’ini ifade eder.
- vh: Görünüm alanının yüksekliğinin %1’ini ifade eder.
- Esnek ve dinamik tasarımlar için uygundur.
width: 100vw;
height: 50vh;
4. Otomatik (auto)
- Genişlik veya yüksekliğin içeriğe göre otomatik ayarlanmasını sağlar.
- İçerik odaklı tasarımlar için kullanılır
width: auto;
5. Min-width / Min-height
- Bir elementin alabileceği minimum genişliği veya yüksekliği tanımlar.
- Elementin boyutları, bu değerlerin altına düşemez.
min-width: 150px;
min-height: 100px;
6. Max-width / Max-height
- Bir elementin alabileceği maksimum genişliği veya yüksekliği tanımlar.
- Elementin boyutları, bu değerleri aşamaz.
max-width: 500px;
max-height: 300px;
Bu bilgiler ışığında aşağıdaki gibi bir örnek tasarım yapabiliriz:
.container {
width: 80%; /* Genişlik, ebeveynin %80'i kadar */
min-width: 300px; /* Genişlik en az 300px olacak */
max-width: 1200px; /* Genişlik en fazla 1200px olacak */
height: auto; /* Yükseklik içeriğe göre ayarlanacak */
}
“min-width” – “max-width” ile “min-height” – “max-height” Kullanımı
Web tasarımında, farklı ekran boyutlarına ve cihazlara uyum sağlamak önemlidir. Kullanıcılar, bir masaüstü bilgisayardan tutun da çeşitli ekran boyutlarındaki cep telefonlarına varıncaya kadar çok çeşitli cihazlarda web sayfalarını ziyaret etmektedir. Bu nedenle, içeriğin her zaman optimal görünmesini ve okunabilir olmasını sağlamak için belirli sınırlamalar koymamız gerekmektedir. İşte bu noktada CSS bize min-width
, max-width
, min-height
ve max-height
gibi özellikler sunar.
Bu özelliklerin adlandırılması da zaten kendi işlevlerini açıkça belirtmektedir. Zira “min“, minumum (en düşük) kelimesinin kısaltmasını, “max” ise maximum (en büyük) kelimesinin kısaltmasını temsil eder. Bu şekilde, bir elementin genişliği ve yüksekliği belirli bir aralıkta sınırlanabilir.
Ayrıca, min-width
, max-width
, min-height
ve max-height
özellikleri, belirli sınırlamalar koyarak bir elementin boyutlandırılmasını kontrol etmenize olanak tanır. Yani bu özellikler, elementin asıl boyutunu belirlemez; sadece belirli sınırlamaları tanımlarlar.
1. CSS’de min-width ve max-width özellikleri, bir elementin genişliğini sınırlamak için kullanılır. Örneğin:
div {
min-width: 250px;
max-width: 550px;
}
Bu stil, div
elementinin genişliğinin asla 250 pikselin altına düşmeyeceğini ve 550 pikseli aşmayacağını belirtir.
2. CSS’de min-height ve max-height özellikleri ise yüksekliği sınırlamak için kullanılır:
div {
min-height: 100px;
max-height: 250px;
}
Yukarıdaki kodumuz ise div
elementinin yüksekliğinin 100 pikselin altına düşmemesi ve 250 pikseli aşmaması gerektiğini belirtir.
“Peki, neden önemli?” Eğer bir element için min-width
, max-width
, min-height
veya max-height
değerleri belirtilmemişse, bu element otomatik olarak içerdiği içeriğe göre boyutlandırılır. Örneğin:
- Eğer bir metin kutusu (div) içerisinde çok metin varsa ve bu kutunun genişliği veya yüksekliği belirtilmemişse, bu kutu metni sığdırmak için otomatik olarak genişleyebilir veya yükselebilir.
- Eğer içerik azsa, kutu sadece içeriğini sığdıracak kadar yer kaplar.
Yani min-width
, max-width
, min-height
ve max-height
özellikleri bu otomatik genişlemeyi veya daralmayı sınırlamak için kullanılır. Örneğin, eğer bir div
için max-width: 500px;
belirlenmişse, bu div 500 pikselden daha geniş olamaz, içeriği ne kadar büyük olursa olsun. Ancak, bu değer belirtilmediyse div
otomatik olarak içeriğine göre genişleyebilir.
<!-- HTML Bölümü -->
<!-- Otomatik genişleyen div örneği -->
<div class="div1">Bu div, içerdiği metne göre otomatik genişler. Eğer içerik çoksa, div daha geniş olacaktır.</div>
<br>
<!-- Max-width değeri belirlenmiş div örneği -->
<div class="div2">Bu div, içerdiği metne göre otomatik genişler. Ancak max-width değeri ile 500 piksel olarak sınırlandırıldığı için 500 pikselden daha geniş olamaz. Eğer içeriği 500 pikselden daha geniş olursa, metin kutunun dışına taşmaz; ama kutu daha geniş olmaz.</div>
<!-- CSS Bölümü -->
/* Otomatik genişleyen div */
.div1 {
background-color: lightblue;
padding: 20px;
border: 1px solid black;
}
/* Max-width değeri belirlenmiş div */
.div2 {
background-color: lightcoral;
padding: 20px;
max-width: 500px;
border: 1px solid black;
}
Bu örnekte, .div1
otomatik genişleyen bir div
‘i temsil ederken, .div2
maksimum genişliği 500 piksel olarak sınırlanmış bir div
‘i temsil eder.
Özellikle blok seviye elementlerde (block-level elements, örneğin div
), genişlik varsayılan olarak ebeveyn elementinin genişliğine (genellikle konteynerin tam genişliğine) eşit olurken, yükseklik içerdiği içeriğe bağlı olarak otomatik olarak ayarlanır. Yani, içeriğe göre yükseklik belirlenir.
Eğer bir elemente spesifik bir width
veya height
değeri atanırsa, element bu belirtilen boyutlara göre şekillenir. Haliyle içerik bu boyutlara sığmazsa kutunun dışına taşacaktır. Bu da haliyle okunabilir olmayan bir içeriğe yol açar. Bu tür durumlar için overflow
özelliği kullanılarak içeriğin nasıl davranması gerektiği belirtilebiliriz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Örneği</title>
<style>
/* Taşan içerik için */
.boxWithoutOverflow {
width: 150px;
height: 20px;
border: 1px solid red;
margin-bottom: 20px; /* İki kutu arasında biraz boşluk bırakalım */
}
/* Taşmayı engelleyen kutu için */
.boxWithOverflow {
margin-top: 50px;
width: 150px;
height: 20px;
border: 1px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="boxWithoutOverflow">
Merhaba! Ben bir içerik kutusuyum ve taşıyorum.
</div>
<div class="boxWithOverflow">
Merhaba! Ben bir içerik kutusuyum ve taşıyorum.
</div>
</body>
</html>