CSS Dersleri 20 - max-width Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Max-Width Kullanımı konusunu öğreneceğiz.

Önceki derslerimizde bahsedildiği gibi; blok düzeyindeki bir öğe her zaman mevcut tüm genişliği kaplar (mümkün olduğu kadar sola ve sağa uzanır).

Blok düzeyindeki bir öğenin genişliğini ayarlamak, kapsayıcısının kenarlarına uzanmasını önleyecektir. Ardından, öğeyi konteyner içinde yatay olarak ortalamak için kenar boşluklarını otomatik olarak ayarlayabilirsiniz. Öğe, belirtilen genişliği kaplar ve kalan alan, iki kenar boşluğu arasında eşit olarak bölünür:

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

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

Bunun yerine max-width kullanılması, böyle durumlarda tarayıcının küçük pencereleri işlemesini iyileştirecektir. Bu, bir siteyi küçük cihazlarda kullanılabilir hale getirirken önemlidir:

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

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

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla