Kutu modeli dersinde anlatıldığı üzere, blok seviye elementler tam satırı kaplarlar. Yani bulundukları satırı tamamen işgal ederler.
Bir blok seviye elemanın width özelliği ile genişliğinin ayarlayabiliriz. Bir blok seviye elemente width özelliği verildiğinde, bu elementin genişliği width değeri kadar olur.
width özelliği kullandığınızda element için margin değerlerni de ayarlayabilirsiniz. Elementi yatayda ortalamak isterseniz margin değerine auto vermelisiniz.
Herhangi bir <div> elementine width özelliği verdiğinizde bu elementin genişliği her zaman verdiğiniz değer kadar olur.
Tarayıcı penceresi daraltıldığında div aynı genişlikte kalır ve tarayıcı penceresinde kaydırma çubuğu belirir.
Mobil cihazlar küçük ekranlara sahip oldukları için bu durum hoş olmayabilir.
width yerine max-width kullanmak bu sorunu çözecektir. max-width ile div elementi en fazla ne kadar genişliğe sahip olacak bunu belirtiriz.
width özelliğinde genişlik sabitken, max-width ile daha dinamik hale gelir. max-width'e verdiğiniz değer elementin en fazla alacağı genişliği belirler.
div.kutu1 {
width:600px;
margin: auto;
border: 1px solid green;
}
div.kutu2 {
max-width:600px;
margin: auto;
border: 1px solid green;
}