Width dan Max-width CSS

Menggunakan width, max-width, dan margin: auto;

Seperti yang disebutkan dalam bab sebelumnya, elemen block-level selalu mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).

Mengatur width dari elemen block-level 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:

Elemen div ini memiliki width: 500px; dan margin diset ke auto

Catatan: Masalah <div> diatas terjadi ketika jendela browser lebih kecil dari lebar elemen. Browser kemudian menambahkan scrollbar horizontal ke halaman.

Menggunakan max-width sebagai gantinya, dalam situasi ini, akan meningkatkan penanganan browser terhadap jendela kecil. Ini penting saat membuat situs yang dapat digunakan di perangkat kecil:

Elemen div ini memiliki max-width: 500px; dan margin diset ke auto

Tips: Ubah ukuran jendela browser menjadi kurang dari 500px, untuk melihat perbedaan antara kedua div.

Berikut adalah contoh dari dua div di atas:

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #303F9F;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #303F9F;
}

Sumber referensi: w3schools