Ö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;
}