Seperti disebutkan di bab sebelumnya; Elemen tingkat blok selalu membutuhkan lebar penuh yang tersedia (terbentang ke kiri dan kanan sejauh mungkin).Mengatur lebar elemen tingkat blok akan mencegahnya merentang ke tepi wadahnya. Kemudian, Anda dapat mengatur margin ke auto, untuk memusatkan elemen secara horizontal di dalam wadahnya. Elemen akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin:
Elemen <div> ini memiliki lebar 500px, dan margin disetel ke auto.
Masalah dengan <div> di atas terjadi saat jendela browser lebih kecil dari lebar elemen. Browser kemudian menambahkan scrollbar horizontal ke halaman.Dengan menggunakan lebar maksimal, dalam situasi ini, akan memperbaiki penanganan browser pada jendela kecil. Hal ini penting saat membuat situs yang dapat digunakan pada perangkat kecil:
Elemen <div> ini memiliki lebar maksimal 500 piksel, dan margin disetel ke auto.
Tip: Ubah ukuran jendela browser menjadi kurang dari 500px lebar, untuk melihat perbedaan antara dua divs! Berikut adalah contoh dari dua divs di atas:
Contoh:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Out Of Topic Show Konversi KodeHide Konversi Kode