Genişliği, maksimum genişliği ve kullanma margin: auto;
Bir önceki bölümde de belirtildiği gibi; blok düzeyinde eleman her zaman kullanılabilir tam genişlikte kaplıyor (stretches out to the left and right as far as it can) .
Ayarlama width bir blok düzeyinde elemanının kabı kenarlarına uzanan engelleyecektir. yatay onun kapsayıcı içindeki eleman merkezi Ardından, auto kenar boşluklarını ayarlayabilirsiniz. elemanın belirli bir genişliğe alacak ve kalan boşluk, iki kenar arasında eşit bölünmüş olacaktır:
Not: sorun <div> Yukarıdaki tarayıcı penceresi elemanının genişliğinden daha az olduğunda ortaya çıkar. Tarayıcı, daha sonra sayfaya yatay kaydırma çubuğunu ekler.
Kullanılması max-width yerine, bu durumda, küçük pencerelerin tarayıcının kullanımını artıracaktır. küçük cihazlarda bir site kullanışlı yaparken bu önemlidir:
Öneri: İki div arasındaki farkı görmek, az 500px genişliğinde için tarayıcı penceresini yeniden boyutlandırma!
Burada yukarıdaki iki div bir örneğidir:
Örnek
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Kendin dene "