CSS Genişlik ve Yükseklik (Width – Height)

HTML ile web sitelerimizi kodlarken bir çok elementi kullanırız ve bu elementleri konumlandırırız. Bu konumlandırmayı nesnelerin boyutlarına göre yaparız. Yani genişlik ve yüksekliklerine göre. Bu yazımızda CSS genişlik (width) ve yükseklik (height) konusunu işleyeceğiz.

CSS Width – Height Nedir ?

CSS’te bir nesnenin genişliğini width, yüksekliğini height ile belirleriz. Hemen bu terimlerin alabileceği değerleri görelim.

Width – Height Örnek Kullanımı

<div class="kare"></div>

.kare {
  width: 200px;
  height: 200px;
  background-color: red;
}             

Çıktısı :

En Düşük ve En Yüksek Genişlik (min-width, max-width)

Bazı durumlarda bir nesnenin içerisinde farklı boyutlarda elemanlar olabilir. Bu gibi durumlarda nesnemizin en düşük alabileceği genişlik boyutunu veya en yüksek alabileceği genişlik boyutunu ayarlayabiliriz. Hemen bir örnek ile görelim.

CSS min-width Kullanımı

.kare {
  width: 100px;
  min-width: 300px;
  background-color: red;
}    

Burada ‘kare’ klasına sahip div genişliğinin alabileceği minimum değer 300 px’dir. Div’in içersinde az eleman varsa dahi minimum 300 px değerini alır. Yani width değerini değersiz kılar.

CSS max-width Kullanımı

.kare {
  width: 1000px;
  max-width: 500px;
  background-color: red;
}    

Burada ‘kare’ klasına sahip div’in alabileceği maksimum değer 500px’dir. Div’in içersinde çok fazla eleman varsa dahi maksimum 500px değerini alır. Yani width değerini değersiz kılar ve ne kadar eleman olursa olsun genişlik 500px değerini geçmez.

En Düşük ve En Yüksek Yükseklik (min-height, max-height)

Mantık olarak genişlik ile aynıdır. Hemen örnek kullanımlarını görelim.

CSS min-height Kullanımı

.kare {
  height: 100px;
  min-height: 300px;
  background-color: red;
}    

Burada ‘kare’ klasına sahip div yüksekliğinin alabileceği minimum değer 300 px’dir. Div’in içersinde çok eleman varsa dahi minimum 300 px değerini alır. Yani height değerini değersiz kılar.

CSS max-height Kullanımı

.kare {
  width: 1000px;
  max-width: 500px;
  background-color: red;
}    

Burada ‘kare’ klasına sahip div yüksekliğinin alabileceği maksimum değer 500px’dir. Div’in içersinde çok eleman varsa dahi maksimum 500px değerini alır. Yani width değerini değersiz kılar ve eleman boyutu ne olursa olsun yükseklik 500px değerini geçmez.

Bu yazımızda CSS genişlik (width) ve yükseklik (height) konusunu işledik. Diğer CSS derslerimizi de okumak isterseniz buradan tümüne ulaşabilirsiniz.