Mengatur Lebar, Lebar Maksimal, dan Margin Otomatis

Pada tutorial pengertian display CSS sudah dijelaskan bahwa elemen level block akan menggunakan ruang penuh (lebar 100%) secara default.

Jika kamu menentukan lebar pada elemen level block kurang dari 100%, maka elemen tidak bisa meregang sampai ujung container.

Misalnya saya mengatur lebar menjadi 500px pada elemen <div> dengan style berikut:

div {
    width: 500px;
    padding: 0.25em 1em;
    border: 2px solid green;
}

Tampilan di browser Chrome akan menjadi seperti ini:

Perhatikan contoh di atas, elemen div akan menempati ruang bagian kiri, sedangkan ruang di sebelah kanan menjadi kosong.

Lalu bagaimana cara membuat elemen ini agar bisa berada di tengah container?

Untuk mengatur elemen block agar bisa berada ditengah elemen container, kamu bisa menggunakan properti CSS margin: auto.

Sekarang saya akan menambahkan margin: 0 auto pada contoh di atas.

div {
    width: 500px;
    padding: 0.25em 1em;
    border: 2px solid green;
    margin: 0 auto;
}

Tampilan di browser Chrome akan menjadi seperti ini:

Pada contoh di atas, posisi elemen div berada di tengah karena ruang yang tersisa digunakan sebagai nilai margin kiri dan kanan.

Kamu juga bisa mengatur margin kiri menjadi auto untuk menempatkan elemen div agar berada di sisi kanan elemen container.

Sekarang saya akan menambahkan margin-left: auto pada contoh di atas.

div {
    width: 500px;
    padding: 0.25em 1em;
    border: 2px solid green;
    margin-left: auto;
}

Tampilan di browser Chrome akan menjadi seperti ini:

Catatan: Permasalahan yang muncul pada contoh di atas yaitu, jika lebar jendela browser lebih kecil dari 500px (misalnya pada smartphone), maka browser akan menambahkan scrollbar horizontal di bagian bawah elemen tersebut.

Jadi seperti ini tampilan di browser Chrome:

Solusinya, gunakan properti CSS max-width untuk membuat lebar elemen div menjadi responsive pada layar yang lebih kecil.

div {
    max-width: 500px;
    padding: 0.25em 1em;
    border: 2px solid green;
    margin: 0 auto;
}

Jadi seperti ini tampilan di browser Chrome:

<div class="div-1">
  <p>Elemen &lt;div&gt; ini memiliki lebar 500px dan margin auto.</p>
</div>
<div class="div-2">
  <p>Elemen &lt;div&gt; ini memiliki lebar maksimal 500px dan margin auto.</p>
</div>

.div-1 {
    width: 500px;
    padding: 0.25em 1em;
    border: 2px solid green;
    margin: 0 auto;
}
.div-2 {
    max-width: 500px;
    padding: 0.25em 1em;
    border: 2px solid green;
    margin: 0 auto;
}