Tata Letak CSS - lebar dan lebar maksimum
Menggunakan lebar, lebar maksimum, dan margin: otomatis;
Seperti yang disebutkan dalam bab sebelumnya; elemen level blok selalu menggunakan lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Menyetel widthelemen level blok akan mencegahnya meregang ke tepi wadahnya. Kemudian, Anda dapat mengatur margin ke otomatis, untuk memusatkan elemen secara horizontal di dalam wadahnya. Elemen akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin:
Catatan: Masalah di <div>atas terjadi ketika jendela browser lebih kecil dari lebar elemen. Browser kemudian menambahkan scrollbar horizontal ke halaman.
Menggunakan max-widthsebagai gantinya, dalam situasi ini, akan meningkatkan penanganan browser terhadap jendela kecil. Ini penting saat membuat situs dapat digunakan di perangkat kecil:
Tip: Ubah ukuran jendela browser menjadi kurang dari 500px, untuk melihat perbedaan antara kedua div!
Berikut adalah contoh dari dua div di atas:
Contoh
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}