Nilai Auto

Kita sudah beberapa kali menulis atau mendengar kata auto: pada margin: 0 auto, pada tinggi gambar, dan pada perilaku bawaan elemen block. Nilai ini sering disalahartikan sebagai nol atau sebagai “tidak ada pengaturan”. Pada kenyataannya auto adalah instruksi yang bermakna: browser diminta menghitung sendiri nilai yang paling tepat dari konteksnya. Chapter ini membedah apa yang dihitung browser untuk tiap property, agar kita bisa memprediksi ukuran elemen tanpa mencoba-coba.

Auto Bukan Nol, Bukan Kosong #

Ketika kita menulis width: auto atau meninggalkan height tanpa nilai, browser menjalankan perhitungan berdasarkan tiga sumber informasi: ukuran elemen induk, isi elemen itu sendiri, dan margin atau padding yang terpasang. Hasilnya berbeda untuk tiap property, dan itulah sebabnya auto harus dipelajari per kasus:

Kalimat kuncinya begini: auto berarti “silakan browser yang menentukan dari konteks”, bukan “jadikan nol”. Karena konteksnya berubah — induk diubah ukurannya, teks ditambah — hasil auto pun ikut berubah secara dinamis.

auto pada width #

Untuk elemen block pada normal flow, width: auto membuat kotak mengisi lebar yang tersedia tanpa meluber. Bandingkan dengan width: 100% yang sering dianggap sama:

.isi-artikel {
  width: auto;      /* bawaan elemen block */
  padding: 16px;
  border: 4px solid #9ed2b5;
}

.isi-kaku {
  width: 100%;
  padding: 16px;
  border: 4px solid #9ed2b5;
}

Perilaku ini berkaitan erat dengan box model yang akan kita bongkar pada section berikutnya.

Karena sifatnya itu, bila bermaksud “memenuhi lebar induk”, width: auto adalah pilihan yang lebih aman daripada width: 100% untuk elemen block biasa.

Satu batasan perlu diingat: property width tidak berpengaruh pada elemen inline seperti span atau a, sehingga menulis width: auto pada elemen tersebut tidak menghasilkan apa pun. Untuk mengatur lebar elemen inline, ia harus diubah dulu menjadi inline-block atau block — perbedaan perilaku ini menjadi inti section Display dan Normal Flow.

margin: auto untuk Perataan Tengah Horizontal #

auto pada margin bekerja dengan cara berbeda: sisa ruang horizontal dibagikan ke sisi yang ditandai auto.

.wadah-utama {
  max-width: 640px;
  margin: 0 auto;
}

Pola ini adalah cara paling klasik untuk menengahkan wadah konten dan sudah kita singgung pada chapter Shorthand dan Longhand:

Dua hal perlu diingat. Pertama, perataan tengah hanya terjadi bila ada sisa ruang — elemen block dengan width: auto sudah memenuhi induk, jadi margin auto tidak punya ruang untuk dibagikan; itulah mengapa pola ini hampir selalu bersanding dengan max-width yang lebih kecil dari induknya. Kedua, margin-top: auto dan margin-bottom: auto pada normal flow dihitung sebagai nol, sehingga trik ini memang khusus untuk sumbu horizontal.

auto pada height #

Tinggi bawaan gambar dan elemen block sama-sama auto, dan pada gambar pola ini menjadi fondasi tampilan responsif:

<img src="foto-kopi.jpg" alt="Secangkir kopi Gayo" width="600" height="400">

img {
  max-width: 100%;
  height: auto;
}

Demo berikut menaruh gambar yang sama di kolom lebar dan kolom sempit:

Pola dua baris ini akan kita pakai berulang kali pada section Images dan Media.

auto juga akan muncul kembali saat kita sampai di Flexbox: pada konteks flex, flex-basis: auto membuat ukuran dasar item ditentukan dari width atau kontennya. Untuk sekarang cukup diingat bahwa auto adalah nilai yang hidup di hampir semua bagian CSS.

Kesalahan Umum #

Ringkasan #

auto adalah instruksi bagi browser untuk menghitung nilai dari konteks: pada width ia mengisi ruang yang tersedia, pada height ia mengikuti konten, dan pada margin horizontal ia membagi sisa ruang sehingga elemen berada di tengah. Memahami arti auto per property membuat banyak perilaku bawaan CSS akhirnya masuk akal. Selanjutnya kita belajar mencampur satuan secara eksplisit dengan fungsi calc(), sehingga kita dapat menghitung sendiri nilai seperti “100 persen dikurangi lebar sidebar”.