CSS Düzeni - genişlik ve maksimum genişlik
Genişlik, maksimum genişlik ve kenar boşluğunu kullanma: otomatik;
Bir önceki bölümde bahsedildiği gibi; blok düzeyinde bir öğe her zaman mevcut tüm genişliği kaplar (olabildiğince sola ve sağa doğru uzanır).
Blok seviyesinde bir elemanın ayarlanması, widthonun kabının kenarlarına kadar uzanmasını önleyecektir. Ardından, öğeyi kabı içinde yatay olarak ortalamak için kenar boşluklarını otomatik olarak ayarlayabilirsiniz. Öğe belirtilen genişliği kaplayacak ve kalan boşluk iki kenar boşluğu arasında eşit olarak bölünecektir:
Not: Yukarıdakiyle ilgili sorun <div>, 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 kullanmak max-width, 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!
İşte yukarıdaki iki div'in bir örneği:
Örnek
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}