CSS Düzen - width ve max-width

width, max-width ve margin: auto kullanarak

Önceki bölümde belirtildiği gibi, blok seviye elemanları her zaman mevcut tüm genişliği kaplar (mümkün olduğunca sağa ve sola genişler).

Blok seviye elemanlarının width Bu, onun konteynerin kenarına uzanmasını önleyecektir. Sonra, elemanı konteynerinde yatay olarak ortalamak için marjini otomatik olarak ayarlayabilirsiniz. Eleman belirlenen genişliği kaplayacak ve geri kalan alan iki marjin arasında eşit olarak dağıtılacaktır:

Bu <div> elemanın genişliği 500px, marjin ayarı otomatik olarak yapılmıştır.

Dikkat:Tarayıcı penceresi elemanın genişliğinden küçük olduğunda, yukarıdaki bu <div> sorun yaşanabilir. Tarayıcı sayfaya dikey kaydırma çubuğu ekleyebilir.}

Bu durumda, max-width Tarayıcıların küçük pencerelerle nasıl başa çıktığını iyileştirebilir. Küçük cihazlarda web sitesinin kullanılabilir olmasını sağlamak için bu nokta önemlidir:

Bu <div> elementinin maksimum genişliği 500px, dış kenar boşluğu otomatik olarak ayarlanmıştır.

İpucu:Tarayıcı penceresinin boyutunu 500 pikselden küçük bir boyuta ayarlayın, iki div arasındaki farkları görmek için!

Bu iki div'in örneği şudur:

Örnek

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

Kişisel Deneyim