CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)

CSS boyut özelliklerini bir elemanın yüksekliğini ve genişliğini kontrol etmek için kullanılır. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır. Tüm boyut özelliklerine aşağıdaki tablodan ulaşabilirsiniz.

Değerlerin açıklaması:

• auto : auto özelliği kullanıldığında mesafeyi tarayıcı/browser kendi ayarlayacaktır.
• length : Piksel (px), em , cm ve benzeri uzunluk ölçüleri kullanılabilir.
• % : Yüzde kullanımı vardır.
• none : Değer yok anlamındadır.

Genişlik ve yükseklik Özellikleri

Genişlik ve yükseklik özelliği bir elemanın içerik alanının genişliğini ve yüksekliğini tanımlar. Bu genişlik ve yükseklik padding, sınırları, ya da kenar boşluklarını içermez. Bakınız CSS kutusu modelini etkin genişlik ve yükseklik nasıl hesaplandığını öğrenin.

Genişlik ve yükseklik özelliği bir uzunluk (px , pt , em , vb), yüzde , ya da auto değerlerini alabilir. Negatif uzunluk değerlerine izin verilmez.

CSS:

div{
     width: 300px;
     height: 200px;
     background: #EEE8AA;
    }

HTML:

<div>Bu bir deneme yazısıdır.</div>

ÇIKTI:

max-height Özellik

max-height özelliği, bir elemanın maksimum içerik yüksekliğini belirlemenizi sağlar. Elemanımızın içi çok dolu olsada maximum yüksekliği geçmeyecektir. Bu maksimum yükseklik padding sınırları ya da kenar boşluklarını içermez.

Not: max-height daha büyük değer verilen yükseklik(height) özelliğinin değerini geçersiz yapar.

CSS:

div{
     height: 200px;
     max-height: 100px;
     background: #33cc00;
    }
 p{
    max-height: 100px;
    background: #F0E68C;
   } 

HTML:

<div>Bu div öğesinin maksimum yüksekliği 100px
 ayarlanır, bu nedenle daha uzun olamaz</div>

<p>Bu bir deneme yazısıdır.</p>

Yukarı örnekte dikkat ettiyseniz div etiketinde height ve max-height kodu belirtilmiş burda yükseklik(height) değeri büyük verildiği için geçersiz olur. p etiketine maximum yükseklik verildiği halde bu yükseklikte görüntülemez nedeni ise metin yazısı kısa olduğu için metine göre yükseklik artar.

min-height Özellik

min-height özelliği, bir elemanın asgari içerik yüksekliğini belirlemenizi sağlar. Elemanımızın içi dolu olmasa bile belirlediğimiz minimum yükseklikte kalacaktır. Bu minimum yükseklik padding sınırları ya da kenar boşluklarını içermez.

Not: min-height daha küçük değer verilen yükseklik(height) ve max-height özelliğini geçersiz yapar.

CSS:

div{        
     height: 150px;
     min-height: 200px;
     background: #33cc00;
    }
 p{
     min-height: 100px;
     background: #F0E68C;
   }

HTML:

<div>Bu div öğesinin minimum yüksekliği 200px
 ayarlanır,bu yüzden daha küçük olamaz.</div>

<p>Bu bir deneme yazısıdır.</p>

Yukarı örnekte yükseklik(height) değeri küçük verildiği için öncelik minumum yükseklikte olduğu için min-height değeri geçerli olur.

max-width Özellik

Max-width özelliği, bir blok maksimum içerik genişliğini belirlemenizi sağlar. Elemanımızın içi çok dolu olsada maximum genişliği geçmeyecektir. Bu maksimum genişlik padding sınırları ya da kenar boşluklarını içermez.

Not: max-width genişliğinden daha büyük değer verilen genişliği(width) özelliğinin değerini geçersiz yapar.

CSS:

div{
     width: 300px;
     max-width: 200px;
     background: #33cc00;
   }
p{
    float: left;
    max-width: 400px;
    background: #F0E68C;
 }

HTML:

<div>Bu div elemanının maksimum genişliği 200px ayarlanır, 
böylece daha geniş olamaz.</div> 

<p>Bu bir deneme yazısıdır.</p>

Yukarı örnekte genişlik(width) değeri büyük verildiği için aynı zamanda maximum genişlik(max-width)küçük değer verildiği için genişlik(width) değerini geçersiz yapar.

min-width Özellik

min-width özelliği, bir elemanın asgari içerik genişliği belirlemenizi sağlar. Elemanımızın içi boş olsada minimum genişliği geçmeyecektir. Bu minimum genişlik padding sınırları ya da kenar boşluklarını içermez.

Not: min-width daha küçük değer verilen genişliği(width) özelliği geçersiz yapar.

CSS:

div{
     width: 300px;
     min-width: 400px;
     background: #33cc00;
   }     
 p{
    float: left;
    min-width: 400px;
    background: #F0E68C;
  }

HTML:

<div> Bu div elemanının asgari genişliği 400px ayarlanır, 
bu nedenle daha dar olamaz.</div>
<p>Bu bir deneme yazısıdır.</p>

ÇIKTI:

Yukarı örnekte genişlik(width) değeri küçük değer verildiği için ve min-width değeri belirtildiği için minumum genişlik(min-width) öncelikli olduğu için genişlik(width) özelliği geçersiz yapar.

min-height gibi kodları nerde kullanabiliriz, örneğin Websitemizin veritabanı olsun burdan ziyaretçi yorumlarını çekip mesaj kutumuzda göstermek istersek şöyle kod düzeni oluşturmamız gerekir.

CSS:

div{ height:100%;
     width:400px;
     background: #F0E68C;
     border-radius:20px;
    }

HTML:

<div><p>Makaleniz çok açıklayıcı teşekkür ederim.</p></div>

ÇIKTI:

Yukarıda gördüğünüz üzere mesaj kısa olduğu için mesaj kutumuz içerik kadar yer kapladığı için websitemizde görüntü bozukluğuna sebep oldu. Min-height özelliğini vererek mesaj kısada olsa kutumuzun belli bir büyüklükte kalmasını sağlayalım.

CSS:

div{ min-height:50px;
     width:400px;
     background: #F0E68C;
     border-radius:20px;
   }
   
 p { margin-left:20px; } 
 

HTML:

<div><p>Makaleniz çok açıklayıcı teşekkür ederim.</p></div>

ÇIKTI:

Şimdide ziyaretci mesajın çok uzun olduğunu ve belirli yüksekliği geçtiğinde overflow yani taşma özelliğini kullanarak kutumuzun belirli yükseklikte kalmasını kalan içeriğinde scrool vasıtasıyla görmeyi sağlayalım.

CSS:

div{ min-height:50px;
     max-height:200px;
     overflow: scroll;
     width:400px;
     background:#F0E68C; 
   }

 p{margin-left:10px;}
 

HTML:

<div>

<p>Lorem Ipsum nedir?: 
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. 
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı 
oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden 
beri endüstri standardı sahte metinler olarak kullanılmıştır. 
Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda
pek değişmeden elektronik dizgiye de sıçramıştır. 
1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması
ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü
yayıncılık yazılımları ile popüler olmuştur.</p>

</div>

ÇIKTI: