Chapter sebelumnya menunjukkan dua jenis kotak dalam normal flow: yang menumpuk dan yang mengalir. Penentu jenisnya adalah satu property: display. Nilai awal display menurut spesifikasi adalah inline, tetapi stylesheet bawaan browser memberi mayoritas elemen struktur nilai block — itulah sebabnya halaman polos tetap tersusun wajar. Chapter ini membedah kedua nilai dasar tersebut, mencatat nilai default setiap elemen, dan yang terpenting: properti mana yang benar-benar berlaku pada masing-masing.
display: block #
Elemen dengan display: block mendapat empat perilaku yang saling terkait:
- Menempati satu baris sendiri; tidak ada elemen lain di sampingnya pada baris yang sama.
- Lebar defaultnya mengisi ruang container yang tersedia (
width: auto). widthdanheightbisa diatur bebas.margindanpaddingberlaku penuh di empat sisi.
.panel-peringatan {
display: block; /* memang default; ditulis eksplisit agar maksudnya jelas */
width: 320px;
height: 96px;
margin: 16px 0;
padding: 12px;
}Demo memasang rule di atas lalu menyandingkan elemen block berikutnya:
display: inline #
Elemen dengan display: inline mengalir bersama teks, dan di sinilah aturannya berbeda tajam:
widthdanheightdiabaikan; ukuran kotak mengikuti isinya.paddingdanmarginhorizontal (kiri/kanan) berlaku dan menggeser teks di sekitarnya.paddingdanbordervertikal digambar, tetapi hanya visual: keduanya tidak mendorong baris lain.marginvertikal (atas/bawah) tidak berpengaruh sama sekali.
.kata-peran {
display: inline;
width: 200px; /* diabaikan: inline tidak menerima width */
height: 50px; /* diabaikan: inline tidak menerima height */
margin-top: 40px; /* tidak berpengaruh: margin vertikal inline diabaikan */
}Demo memasang deklarasi yang tidak berlaku itu pada satu kata di tengah kalimat:
Nilai Default Setiap Elemen #
Kita jarang menulis display: block secara eksplisit karena browser sudah mengaturnya. Berikut pembagian yang paling sering ditemui:
| Elemen | display default |
|---|---|
div, p, h1–h6, ul, ol, li, section, article, form | block |
span, a, strong, em, code, label, small | inline |
Dua elemen berada di luar tabel karena punya kategori tersendiri: img adalah replaced element yang mengalir seperti inline tetapi tetap menerima width dan height, sedangkan kontrol form seperti button default-nya inline-block — nilai hybrid yang kita bahas pada chapter berikutnya.
Properti yang Berlaku pada Inline #
Tabel ini merangkum nuansa inline yang paling sering mengejutkan pemula:
| Property | Perilaku pada elemen inline |
|---|---|
width, height | Diabaikan sepenuhnya |
padding kiri/kanan | Berlaku; mendorong teks tetangga |
padding atas/bawah | Digambar (latar dan border memanjang) tanpa mendorong baris lain |
margin kiri/kanan | Berlaku |
margin atas/bawah | Tidak berpengaruh |
background, border | Digambar mengikuti area teks plus padding |
Nuansa “digambar tanpa mendorong” adalah sumber kebingungan klasik: latar kotak inline bisa memanjang ke atas dan ke bawah melewati tinggi barisnya, menimpa area baris tetangga, sementara jarak antarbaris tidak berubah sedikit pun. Browser memperlakukannya sebagai cat visual, bukan perubahan layout:
Bila elemen yang sama diganti inline-block, baris di sekitarnya langsung terdorong — perbedaan yang akan kita bahas pada chapter berikutnya.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
width/height pada span tidak bereaksi | elemen inline mengabaikan kedua property | gunakan inline-block atau block sesuai kebutuhan |
| Baris lain tertimpa latar/border kotak inline | padding vertikal inline hanya visual | beri ruang lewat line-height, atau ganti ke inline-block |
margin-top pada tautan tidak bergerak | margin vertikal inline tidak diterapkan | ganti ke inline-block bila butuh jarak vertikal |
Ringkasan #
display: block memberi elemen baris sendiri, lebar penuh, dan kendali penuh atas ukuran serta margin-padding empat sisinya. display: inline mengalirkan elemen bersama teks dengan aturan berbeda: ukuran mengikuti isi, property vertikal sebagian besar hanya visual atau diabaikan, dan property horizontal berlaku normal. Nilai default setiap elemen sudah ditentukan stylesheet browser, sehingga tugas kita biasanya mengubahnya secara sadar. Untuk kebutuhan di antara keduanya — mengalir seperti inline tetapi menerima ukuran seperti block — ada nilai hybrid inline-block, topik chapter berikutnya.