· HTMLCSSDasar

Inline Adalah: Pengertian Elemen Inline vs Block di HTML (+ Inline-Block)

Inline artinya sebaris: elemen yang mengalir dalam baris teks tanpa baris baru. Pahami beda inline vs block, inline-block, dan contoh kodenya di sini.

Pembuat Hyper Sheets & BelajarWeb.dev

Inline artinya “sebaris” atau “di dalam baris”. Dalam HTML, elemen inline adalah elemen yang mengalir di dalam baris teks tanpa memulai baris baru — contohnya span, a, dan strong. Lawannya adalah elemen block yang selalu memulai baris baru dan mengambil seluruh lebar yang tersedia — contohnya div, p, dan h1.

Satu kata ini muncul di dua konteks berbeda yang sering bikin pemula bingung: elemen inline (perilaku layout sebuah tag HTML) dan inline CSS (menulis style langsung di atribut style sebuah tag). Keduanya kita bahas tuntas di artikel ini — mulai dari arti kata, daftar elemen inline vs block, perilaku uniknya yang sering menjebak (width diabaikan!), jalan tengah bernama inline-block, cara mengubah display lewat CSS, sampai kesalahan umum dan FAQ. Semua dengan contoh kode yang bisa langsung kamu coba.

Inline Adalah… (Arti Kata dan Maknanya di Dunia Web)

Secara bahasa, inline adalah gabungan “in” (di dalam) dan “line” (baris), jadi artinya “di dalam baris” atau “sebaris”. Di dunia web development, istilah ini paling sering merujuk pada elemen inline: elemen HTML yang menempati ruang hanya sebesar kontennya dan mengalir mengikuti aliran teks di sekitarnya, seperti sebuah kata di dalam kalimat. Elemen inline tidak pernah “memotong” paragraf menjadi baris baru.

Bayangkan kamu sedang mengetik kalimat, lalu menebalkan satu kata di tengahnya. Kata yang ditebalkan itu tetap berada di posisinya — tidak melompat ke baris baru, tidak mendorong kata lain ke bawah. Itulah perilaku inline. Tag strong yang menebalkannya adalah elemen inline: dia menumpang di dalam baris, bukan membuat baris sendiri.

Ada dua makna “inline” yang perlu kamu bedakan sejak awal:

  1. Elemen inline — kategori perilaku layout elemen HTML (display: inline). Ini topik utama artikel ini.
  2. Inline CSS — cara menulis CSS langsung di atribut style pada tag HTML, misalnya style="color: red". Disebut “inline” karena style-nya ditulis sebaris dengan elemennya, bukan di file terpisah.

Sebagian orang yang mencari “inline artinya” sebenarnya sedang menanyakan makna kedua. Tenang — kita bahas keduanya, dan di akhir artikel kamu akan paham kapan istilah mana yang sedang dipakai.

Elemen Inline vs Elemen Block: Apa Bedanya?

Perbedaan utama elemen inline dan block: elemen inline mengalir di dalam baris teks dan lebarnya hanya sebesar kontennya, sedangkan elemen block selalu memulai baris baru dan lebarnya otomatis memenuhi container. Konsekuensinya, dua elemen inline bisa berdampingan dalam satu baris, sedangkan dua elemen block selalu menumpuk vertikal seperti tumpukan balok.

Lihat perbandingan langsungnya:

<p>
  Ini paragraf dengan <span>span</span> dan
  <strong>strong</strong> di dalamnya — semuanya tetap sebaris.
</p>

<div>Div pertama</div>
<div>Div kedua</div>
<!-- Dua div ini menumpuk vertikal, masing-masing satu baris penuh -->

Kalau kamu beri background color supaya kelihatan bentuk kotaknya:

span, strong {
  background: #fde68a; /* kuning: hanya selebar teksnya */
}
div {
  background: #bfdbfe; /* biru: memanjang selebar container */
}

Kotak kuning milik span dan strong hanya membungkus teksnya saja dan tetap berada di tengah kalimat. Kotak biru milik div memanjang dari tepi kiri ke tepi kanan container, dan div kedua turun ke baris berikutnya — meskipun sebenarnya masih ada ruang kosong di sebelah div pertama.

Ringkasan perbedaannya:

AspekElemen InlineElemen Block
Baris baruTidak — mengalir dalam barisYa — selalu mulai baris baru
Lebar defaultSebesar kontenMemenuhi lebar container (100%)
width / heightDiabaikanBerlaku normal
margin atas/bawahDiabaikanBerlaku normal
padding atas/bawahDigambar, tapi tidak mendorong baris lainBerlaku normal
Boleh berisiElemen inline lain dan teksElemen block dan inline
Contohspan, a, strong, em, imgdiv, p, h1, ul, section

Tiga baris pertama tabel itu intuitif. Tiga baris berikutnya — soal width, height, dan margin vertikal yang diabaikan — adalah sumber bug layout paling umum bagi pemula, dan kita bedah khusus di bagian selanjutnya.

Daftar Elemen Inline yang Sering Dipakai

Berikut elemen inline yang paling sering kamu temui sehari-hari:

  • span — pembungkus generic tanpa makna, kanvas kosong untuk styling
  • a — link/tautan
  • strong dan b — teks tebal (yang pertama bermakna “penting”)
  • em dan i — teks miring (yang pertama bermakna “penekanan”)
  • img — gambar (inline, tapi punya perilaku khusus — dibahas nanti)
  • code — potongan kode di dalam kalimat
  • small — teks berukuran kecil seperti keterangan
  • mark — teks yang disorot (highlight)
  • sub dan sup — subscript dan superscript
  • br — ganti baris paksa
  • label, input, button, select — elemen form (secara historis dikategorikan inline)

Perhatikan polanya: hampir semua elemen inline berurusan dengan teks di dalam kalimat. Itu memang tujuan desainnya — memformat atau menandai sebagian kecil teks tanpa merusak aliran paragraf. Kalau kamu ingin mendalami tag-tag pemformatan teks seperti strong, em, dan mark satu per satu, lesson text formatting di Hyper Sheets membahasnya dengan editor langsung di browser.

Daftar Elemen Block yang Sering Dipakai

Sebaliknya, elemen block adalah “balok bangunan” struktur halaman:

  • div — pembungkus generic untuk kelompok konten
  • p — paragraf
  • h1 sampai h6 — heading/judul
  • ul, ol, li — daftar dan itemnya
  • section, article, header, footer, nav, main — elemen semantik untuk struktur halaman
  • form, fieldset — formulir
  • table — tabel (teknisnya display: table, tapi perilakunya memulai baris baru seperti block)
  • blockquote — kutipan panjang
  • hr — garis pemisah horizontal

Polanya juga jelas: elemen block berurusan dengan struktur — membagi halaman jadi bagian-bagian besar yang menumpuk dari atas ke bawah. Kalau daftar tag di atas masih banyak yang asing, sebaiknya mampir dulu ke panduan belajar HTML untuk pemula supaya fondasinya kuat.

Elemen Generic untuk Inline dan Block: span dan div

Elemen generic yang membungkus konten satu baris (inline) adalah span, sedangkan elemen generic untuk konten level block adalah div. Keduanya disebut “generic” karena sama sekali tidak punya makna semantik — mereka tidak memberi tahu browser atau screen reader apa pun tentang isinya. Fungsinya murni sebagai pembungkus untuk keperluan styling atau manipulasi JavaScript.

Ini pertanyaan yang sangat sering muncul di kuis dan tugas sekolah/kampus, jadi mari kita tegaskan sekali lagi: kalau soalnya berbunyi “elemen generic yang digunakan untuk membungkus konten satu baris (inline) adalah…”, jawabannya span. Kalau soalnya tentang pembungkus generic untuk blok konten, jawabannya div.

Contoh penggunaan span yang idiomatik:

<p>
  Total belanja kamu:
  <span class="harga">Rp 150.000</span>
  (sudah termasuk ongkir).
</p>
.harga {
  color: #16a34a;
  font-weight: 700;
}

Kita hanya ingin mewarnai dan menebalkan bagian harga — bukan seluruh paragraf. Tidak ada tag semantik yang cocok (strong bermakna “penting”, em bermakna “penekanan”, dan di sini kita murni butuh styling), maka span adalah pilihan yang tepat: pembungkus netral yang tidak mengubah makna maupun aliran teks.

Bandingkan dengan div yang dipakai untuk mengelompokkan blok konten:

<div class="kartu-produk">
  <h3>Kaos Polos Hitam</h3>
  <p>Bahan katun combed 30s, nyaman dipakai harian.</p>
  <span class="harga">Rp 85.000</span>
</div>

Aturan praktisnya sederhana: span untuk membungkus sebagian teks di dalam baris, div untuk membungkus kelompok elemen menjadi satu blok. Membalik keduanya secara teknis “jalan”, tapi menghasilkan HTML yang aneh dan sering memicu bug layout — kita bahas di bagian kesalahan umum.

Satu catatan penting: utamakan tag semantik dulu sebelum lari ke span/div. Kalau teksnya memang penting, pakai strong. Kalau itu kutipan, pakai blockquote. span dan div adalah pilihan terakhir saat tidak ada tag bermakna yang cocok.

Perilaku Unik Elemen Inline yang Sering Bikin Bingung

Elemen inline mengabaikan width dan height, mengabaikan margin atas/bawah, dan padding vertikalnya tidak mendorong baris di sekitarnya. Tiga perilaku ini adalah alasan kenapa styling yang kamu tulis “tidak ngefek” padahal tidak ada yang salah ketik. Begitu paham logikanya, semua jadi masuk akal.

width dan height Diabaikan

Coba beri ukuran pada sebuah span:

span {
  width: 300px;   /* diabaikan! */
  height: 100px;  /* diabaikan! */
  background: #fde68a;
}

Hasilnya: tidak terjadi apa-apa. Kotak kuningnya tetap hanya sebesar teks di dalamnya. Ini bukan bug — ini by design. Ukuran elemen inline selalu ditentukan oleh kontennya, karena tugasnya memang mengalir di dalam baris teks. Bayangkan kalau satu kata di tengah kalimat bisa dipaksa selebar 300px — aliran teks di sekitarnya akan kacau balau.

Ini juga alasan kenapa width: 100% pada link atau height pada span tidak pernah bekerja. Solusinya bukan menambah !important (percayalah, sudah banyak yang mencoba), melainkan mengubah nilai display-nya — ke inline-block atau block — yang kita bahas sebentar lagi. Penjelasan lengkap tentang bagaimana width dan height bekerja (termasuk interaksinya dengan box-sizing) sudah kami tulis di artikel width dan height adalah, dan kamu bisa latihan langsung di lesson height dan width.

Margin Vertikal Diabaikan, Padding Vertikal “Setengah Bekerja”

Perilaku kedua yang menjebak:

span {
  margin: 20px;  /* hanya kiri & kanan yang bekerja */
  padding: 20px; /* kiri-kanan normal; atas-bawah digambar tapi tidak mendorong */
  background: #fde68a;
}
  • margin-top dan margin-bottom diabaikan total. Elemen inline tidak bisa mendorong baris di atas atau di bawahnya menggunakan margin. Hanya margin-left dan margin-right yang bekerja.
  • padding-top dan padding-bottom digambar, tapi tidak memengaruhi layout. Background kuningnya memang melebar ke atas dan bawah, tapi baris teks di atas/bawahnya tidak bergeser — akibatnya background bisa menimpa baris lain di sekitarnya.

Kenapa begini? Karena tinggi sebuah baris teks dikendalikan oleh line-height, bukan oleh kotak elemen inline di dalamnya. Elemen inline adalah “tamu” di dalam baris — dia tidak berhak mengubah tinggi barisnya sendiri. Konsep kotak, margin, dan padding ini bagian dari materi box model; kalau masih samar, lesson box model menjelaskannya visual dan bertahap.

Pengecualian: img dan Kawan-Kawannya

“Tunggu — img katanya inline, tapi width dan height-nya bisa diatur?” Pertanyaan bagus. img (juga input, button, select, textarea, dan video) termasuk kategori khusus yang disebut replaced element: elemen yang kontennya digantikan oleh sesuatu dari luar dokumen (file gambar, kontrol form). Replaced element tetap mengalir sebaris seperti inline, tapi punya dimensi intrinsik sehingga width dan height berlaku padanya.

Jadi jangan jadikan img patokan perilaku inline — dia pengecualian, bukan aturan. Patokan yang benar adalah span, a, dan strong.

display: inline-block — Jalan Tengah Terbaik

display: inline-block adalah nilai display yang membuat elemen tetap mengalir sebaris seperti inline, tapi menghormati width, height, dan margin/padding vertikal seperti block. Ini jalan tengah yang menggabungkan sisi terbaik keduanya, dan jawaban untuk kebutuhan klasik: “aku mau elemen-elemen ini berdampingan, tapi ukurannya bisa kuatur”.

.badge {
  display: inline-block;
  padding: 4px 12px;      /* padding vertikal sekarang benar-benar bekerja */
  margin-top: 8px;        /* margin vertikal juga bekerja */
  min-width: 60px;        /* ukuran pun bisa diatur */
  background: #dbeafe;
  border-radius: 9999px;
  text-align: center;
}
<p>
  Status pesanan:
  <span class="badge">Dikirim</span>
</p>

Badge di atas tetap duduk manis di dalam kalimat (perilaku inline), tapi padding vertikalnya sungguhan mendorong ruang di sekitarnya dan min-width-nya dihormati (perilaku block). Persis yang kita mau.

Perbandingan tiga nilai display dasar:

Perilakuinlineinline-blockblock
Mengalir sebarisYaYaTidak — selalu baris baru
width / heightDiabaikanBerlakuBerlaku
Margin/padding vertikalDiabaikan / tak mendorongBerlakuBerlaku
Lebar defaultSebesar kontenSebesar konten100% container

Contoh kasus nyata inline-block yang paling umum:

  1. Badge dan label status — seperti contoh di atas.
  2. Tombol dari tag a — link secara default inline, jadi padding vertikalnya bermasalah. inline-block menyelesaikannya:
.tombol {
  display: inline-block;
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border-radius: 8px;
  text-decoration: none;
}
  1. Item menu horizontal (cara klasik) — sebelum era Flexbox, li yang block diubah jadi inline-block supaya menu berjajar. Sekarang display: flex pada ul adalah cara yang lebih modern (panduan lengkapnya ada di artikel memahami Flexbox), tapi memahami cara klasik ini tetap penting karena banyak kode lama memakainya.

Satu keunikan inline-block yang legendaris: karena elemen-elemennya diperlakukan seperti “kata” dalam teks, spasi atau baris baru di antara tag di HTML ikut dirender sebagai celah kecil (sekitar 4px, tergantung font). Dua inline-block yang ditulis di baris HTML terpisah tidak akan menempel rapat. Dulu ini diakali dengan berbagai trik; sekarang, kalau kamu butuh kontrol jarak antar item, sinyal kuat bahwa Flexbox dengan gap adalah alat yang lebih tepat.

Materi interaktif tentang perbedaan ketiganya — lengkap dengan latihan yang langsung dicek otomatis — ada di lesson inline dan block di Hyper Sheets.

Mengubah Display Elemen via CSS

Kategori inline atau block bukan takdir permanen — kamu bisa mengubahnya kapan saja lewat properti CSS display. Nilai default hanya “setelan pabrik” dari browser; span bisa jadi block, div bisa jadi inline, dan semuanya sah-sah saja secara CSS.

a {
  display: block; /* link jadi memenuhi lebar, area kliknya besar */
}

li {
  display: inline-block; /* item list berjajar horizontal */
}

.sembunyikan {
  display: none; /* elemen hilang total dari layout */
}

Kasus a { display: block } sangat umum di dunia nyata: item menu sidebar atau baris daftar yang seluruh areanya bisa diklik, bukan cuma teksnya. Sebaliknya display: none menghapus elemen dari layout sepenuhnya — berbeda dengan visibility: hidden yang menyembunyikan elemen tapi ruangnya tetap ada.

Dua hal penting yang perlu kamu catat:

  1. Mengubah display tidak mengubah makna semantik. span yang diberi display: block tetaplah span di mata browser, screen reader, dan mesin pencari. Kalau kontennya memang sebuah paragraf, pakai p — jangan span yang di-block-kan.
  2. Aturan nesting HTML tetap mengikuti tag, bukan display. Meskipun kamu mengubah span jadi block via CSS, menaruh div di dalam p tetap HTML yang tidak valid (browser akan “memperbaiki” strukturnya diam-diam dan layout-mu bisa kacau).

Properti display sendiri punya nilai-nilai lain yang membuka dunia baru: flex dan grid untuk layout modern, table untuk perilaku tabel, dan lainnya. Peta lengkapnya bisa kamu pelajari di lesson CSS display. Kalau kamu pengguna Tailwind CSS, semua nilai ini tersedia sebagai utility class (inline, block, inline-block, hidden) yang dibahas di lesson display dan visibility versi Tailwind.

Praktik: Menyorot Teks, Badge, dan Menu Navigasi

Mari terapkan semua konsep tadi dalam tiga komponen kecil yang nyata: highlight teks dengan span (inline), badge status dengan inline-block, dan menu navigasi yang membandingkan cara klasik vs modern. Ketiganya adalah pola yang akan terus kamu pakai di proyek sungguhan.

Langkah 1: Menyorot Sebagian Teks dengan span

Kebutuhan: menandai kata kunci penting dalam paragraf dengan warna latar, tanpa merusak aliran kalimat.

<p>
  Elemen <span class="sorot">inline</span> mengalir di dalam baris,
  sedangkan elemen <span class="sorot">block</span> selalu memulai
  baris baru.
</p>
.sorot {
  background: #fef08a;
  padding: 0 6px;         /* hanya horizontal — aman untuk inline */
  border-radius: 4px;
  font-weight: 600;
}

Perhatikan padding-nya sengaja hanya kiri-kanan (0 6px). Karena span masih display: inline, padding vertikal akan digambar menimpa baris lain — jadi kita hindari. Kalau sorotan butuh “napas” vertikal, naikkan line-height paragrafnya atau ubah span-nya jadi inline-block.

Langkah 2: Badge Status dengan inline-block

Kebutuhan: label status berbentuk pil yang duduk di dalam kalimat tapi ukuran dan paddingnya terkontrol penuh.

<p>Pesanan #1024 <span class="badge badge-sukses">Selesai</span></p>
<p>Pesanan #1025 <span class="badge badge-proses">Dikemas</span></p>
.badge {
  display: inline-block;  /* kuncinya di sini */
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.badge-sukses {
  background: #dcfce7;
  color: #166534;
}
.badge-proses {
  background: #fef9c3;
  color: #854d0e;
}

Tanpa display: inline-block, padding 4px atas-bawah itu akan menimpa teks di sekitarnya alih-alih membuat pil yang rapi. Satu baris deklarasi itulah pembeda antara badge yang profesional dan yang berantakan.

Langkah 3: Menu Navigasi — Cara Klasik vs Modern

Struktur HTML-nya sama untuk kedua cara:

<nav>
  <ul class="menu">
    <li><a href="/">Beranda</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/tentang">Tentang</a></li>
  </ul>
</nav>

Cara klasik dengan inline-block — mengubah li yang aslinya block supaya berjajar:

.menu {
  list-style: none;
  padding: 0;
}
.menu li {
  display: inline-block; /* li berjajar horizontal */
}
.menu a {
  display: inline-block;  /* supaya padding vertikal bekerja */
  padding: 8px 16px;
}

Cara modern dengan Flexbox — li tetap block, container-nya yang mengatur:

.menu {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
}
.menu a {
  display: block;   /* seluruh area link bisa diklik */
  padding: 8px 16px;
}

Dua-duanya menghasilkan menu horizontal, tapi versi Flexbox bebas dari masalah celah spasi antar inline-block dan punya gap untuk jarak yang presisi. Pelajarannya: pemahaman inline/block/inline-block tetap fondasi wajib — bahkan untuk mengerti kenapa a-nya diberi display: block di versi modern sekalipun.

Kalau kamu mau menguji seberapa tajam intuisimu membedakan perilaku display, coba mainkan game Detektif Display — kamu menebak bagaimana elemen akan dirender berdasarkan nilai display-nya, level demi level. Cara belajar yang jauh lebih nempel daripada sekadar membaca.

Inline CSS: Makna Lain dari Kata “Inline”

Inline CSS adalah cara menulis style langsung di atribut style pada sebuah tag HTML — disebut “inline” karena kodenya sebaris dengan elemen yang di-style, bukan karena berhubungan dengan elemen inline. Ini makna kedua dari “inline” yang sering dicari orang, dan penting untuk tahu bedanya supaya tidak tertukar.

<!-- Inline CSS: style menempel langsung di tag -->
<p style="color: red; font-size: 18px;">Teks merah berukuran 18px.</p>

Bandingkan dengan dua cara lain menulis CSS:

<!-- Internal CSS: di dalam tag style di bagian head -->
<style>
  p { color: red; }
</style>

<!-- External CSS: file terpisah, cara yang paling dianjurkan -->
<link rel="stylesheet" href="styles.css">

Jadi div (elemen block) bisa punya inline CSS, dan span (elemen inline) bisa di-style dari file eksternal — kedua konsep ini benar-benar tidak berhubungan selain kebetulan berbagi kata “inline”.

Perlu kamu tahu juga: inline CSS umumnya dihindari di proyek nyata, karena:

  • Sulit dirawat — style tersebar di ratusan tag, bukan terpusat di satu file.
  • Tidak bisa dipakai ulang — style yang sama harus ditulis ulang di setiap elemen.
  • Spesifisitasnya sangat tinggi — inline style mengalahkan hampir semua selector di stylesheet, sehingga susah di-override dan sering memicu perang !important.
  • Tidak mendukung pseudo-class dan media query — kamu tidak bisa menulis :hover atau breakpoint responsive di atribut style.

Inline CSS masih punya tempat yang sah: nilai yang benar-benar dinamis dari JavaScript (misalnya posisi elemen yang dihitung real-time) atau HTML email yang dukungannya terbatas. Di luar itu, tulis CSS-mu di file eksternal.

Kesalahan Umum Seputar Inline dan Block

Kesalahan paling umum seputar inline/block: memaksa width pada elemen inline, memberi margin vertikal pada span, dan menaruh elemen block di dalam elemen inline. Berikut daftar lengkapnya — kenali sekarang supaya tidak menghabiskan berjam-jam debugging nanti.

1. Memberi width/height pada Elemen Inline lalu Bingung Kenapa Tidak Ngefek

Bug klasik nomor satu. width: 200px pada span atau a diabaikan begitu saja tanpa error apa pun. Solusinya bukan !important, melainkan ganti display-nya: display: inline-block (kalau masih ingin sebaris) atau display: block (kalau boleh memenuhi baris).

2. Margin/Padding Vertikal pada Elemen Inline

margin-top pada span tidak melakukan apa-apa, dan padding-top malah membuat background menimpa baris di atasnya. Kalau kamu butuh ruang vertikal pada elemen sebaris, jawabannya hampir selalu display: inline-block.

3. Menaruh Elemen Block di Dalam Elemen Inline

<!-- SALAH: div (block) di dalam span (inline) — HTML tidak valid -->
<span>
  <div>Konten</div>
</span>

Aturan dasarnya: elemen inline hanya boleh berisi elemen inline lain dan teks. div di dalam span atau p di dalam a adalah struktur tidak valid — browser akan diam-diam merombak struktur DOM-mu, dan hasilnya layout aneh yang susah dilacak. (Satu-satunya pengecualian modern: a boleh membungkus elemen block, misalnya seluruh card yang bisa diklik. Tapi span dan elemen inline lainnya tetap tidak boleh.)

4. Memakai div untuk Semuanya (Termasuk yang Seharusnya span)

Membungkus satu kata di tengah kalimat dengan div akan memecah kalimatmu jadi tiga baris, karena div memaksa baris baru. Ingat pembagian tugasnya: span untuk potongan teks sebaris, div untuk blok konten. Dan sebelum keduanya, cek dulu apakah ada tag semantik yang lebih tepat.

5. Kaget dengan Celah Misterius Antar inline-block

Dua elemen inline-block yang ditulis di baris HTML berbeda akan punya celah kecil di antaranya — itu spasi dari baris baru di kode HTML-mu yang ikut dirender. Ini perilaku normal, bukan bug. Kalau jarak antar item penting bagimu, itu pertanda sudah waktunya pindah ke display: flex dengan gap.

6. Mengubah Display tapi Mengharapkan Makna Berubah

display: block pada span hanya mengubah tampilan, bukan makna. Untuk screen reader dan SEO, dia tetap pembungkus tanpa arti. Struktur dokumen yang baik dibangun dari tag yang tepat — heading pakai h1-h6, paragraf pakai p — bukan dari span dan div yang di-styling menyerupainya.

7. Menggantungkan Layout Kompleks pada inline-block

inline-block cocok untuk badge, tombol, dan item kecil sebaris. Tapi begitu kamu mulai menghitung-hitung lebar dengan persentase dan mengakali celah spasi demi membuat grid kolom, berhentilah — Flexbox dan Grid diciptakan persis untuk itu, dengan hasil yang lebih bisa diprediksi.

FAQ Seputar Inline

Apa arti inline dalam HTML?

Inline artinya “sebaris” atau “di dalam baris”. Elemen inline adalah elemen HTML yang mengalir di dalam baris teks tanpa memulai baris baru, dan lebarnya hanya sebesar kontennya. Contohnya span, a, strong, em, dan code. Lawannya adalah elemen block (div, p, h1) yang selalu memulai baris baru.

Elemen generic apa yang digunakan untuk membungkus konten satu baris (inline)?

Jawabannya span. Tag span adalah pembungkus generic (tanpa makna semantik) untuk konten inline — biasanya dipakai untuk memberi style pada sebagian teks di dalam kalimat. Padanannya untuk konten level block adalah div.

Apa itu inline-block?

inline-block adalah nilai properti display di CSS yang menggabungkan dua sifat: elemen tetap mengalir sebaris seperti inline, tapi width, height, serta margin dan padding vertikalnya berlaku seperti block. Umumnya dipakai untuk badge, tombol dari tag a, dan item kecil lain yang harus berdampingan tapi ukurannya perlu diatur.

Apa perbedaan elemen inline dan block?

Elemen inline mengalir dalam baris teks, lebarnya sebesar konten, dan mengabaikan width/height serta margin vertikal. Elemen block selalu memulai baris baru, lebar default-nya memenuhi container, dan semua properti ukuran serta margin bekerja normal. Inline untuk memformat teks di dalam kalimat; block untuk menyusun struktur halaman.

Apa itu inline text?

Inline text merujuk pada teks (dan elemen-elemen pembungkusnya) yang mengalir di dalam satu baris kalimat. Elemen seperti span, strong, em, mark, dan code disebut elemen inline text karena tugasnya menandai atau memformat sebagian teks tanpa memutus aliran baris.

Apa itu inline CSS dan apa bedanya dengan elemen inline?

Inline CSS adalah cara menulis style langsung di atribut style sebuah tag, misalnya style="color: red". Istilah “inline” di sini merujuk pada lokasi penulisan kode (sebaris dengan elemennya), bukan pada perilaku layout. Elemen inline adalah kategori layout (display: inline). Keduanya konsep yang berbeda dan tidak saling berhubungan — elemen block pun bisa diberi inline CSS.

Langkah Selanjutnya

Sekarang kamu sudah memegang konsep yang jadi fondasi semua layout web: inline artinya sebaris, block artinya balok baris baru, span/div adalah pembungkus generic untuk masing-masing, elemen inline mengabaikan width/height dan margin vertikal, inline-block adalah jalan tengahnya, dan semua kategori itu bisa diubah lewat properti display. Plus, kamu tidak akan lagi tertukar antara elemen inline dan inline CSS.

Cara terbaik mengunci pemahaman ini adalah langsung praktik. Kerjakan lesson inline dan block yang interaktif untuk latihan dengan feedback otomatis, lalu uji intuisimu di game Detektif Display. Setelah itu, lanjutkan ke topik yang dibuka oleh properti display ini: artikel width dan height untuk menguasai ukuran elemen, dan panduan Flexbox untuk layout modern yang menggantikan trik-trik inline-block lama. Selamat ngoding!