CSS Maksimum Genişlik (Max-width)

CSS Maksimum Genişlik (max-width)

"width, max-width and margin: auto;" Özelliklerin Kullanımı

"CSS Görüntü Özellikleri (Display)" bölümde bahsettiğimiz gibi; blok düzeyinde bir öğe her zaman mevcut olan tam genişliği kaplar.

Blok seviyesindeki bir elemanın genişliğini ayarlamak, onun sınırının kenarlarına kadar uzamasını önleyecektir. Ardından, öğeyi sınırları içinde yatay olarak ortalamak için kenar boşluklarını (margin) otomatik olarak ayarlayabilirsiniz. Öğe belirtilen genişliği kaplayacak ve kalan boşluk iki kenar boşluğu (margin) arasında eşit olarak bölünecektir.

Not: Yukarıdaki <div> ile ilgili sorun, tarayıcı penceresi öğenin genişliğinden daha küçük olduğunda ortaya çıkar. Tarayıcı daha sonra sayfaya yatay bir kaydırma çubuğu ekler.

Bunun yerine maksimum genişlik kullanmak, bu durumda tarayıcının küçük pencereleri işlemesini iyileştirecektir. Bu, bir siteyi küçük cihazlarda kullanılabilir hale getirirken önemlidir.

İpucu: İki div arasındaki farkı görmek için tarayıcı penceresini 500 pikselden daha az olacak şekilde yeniden boyutlandırın!

Yukarıdaki iki div'in örnekleri şunlardır:

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #f000;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #f000;
}