Rancang Bangun CSS - Lebar dan Max-Width

Dengan menggunakan width, max-width, dan margin: auto;

Seperti yang disebutkan di bab sebelumnya, elemen blok selalu mengambil seluruh lebar yang tersedia (sejauh mungkin menyebar ke kiri dan kanan).

Atur elemen blok width Dapat mencegahnya menyebar ke luar batas kontainer. Lalu, Anda dapat mengatur margin ke auto untuk menempatkan elemen di tengah secara horizontal di dalam kontainer. Elemen akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan diatur rata di antara dua margin:

Lebar elemen <div> ini adalah 500px, margin diatur ke auto.

Perhatian:Ketika tinggi jendela browser kurang dari lebar elemen, yang disebutkan di atas <div> akan mengalami masalah. Browser akan menambahkan scrollbar horisontal ke halaman.

Dalam kasus ini, penggunaan max-width Dapat meningkatkan penanganan browser untuk jendela kecil. Ini penting untuk membuat situs dapat digunakan di perangkat kecil:

Elemen <div> ini memiliki lebar maksimum 500px, margin diatur menjadi auto.

Petunjuk:Atur ukuran jendela browser menjadi kurang dari 500 pixel untuk melihat perbedaan antara 2 div ini!

Ini adalah contoh untuk 2 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;
}

Coba Sendiri