CSS Academy · Pelajaran

Block vs Inline vs Inline-Block

Pahami perbedaan perilaku tampilan block, inline, dan inline-block.

Block vs Inline vs Inline-Block adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Properti display

Properti display adalah salah satu properti paling fundamental dalam CSS. Properti ini menentukan cara elemen berpartisipasi dalam alur tata letak—apakah membuat kotak tingkat blok, kotak sebaris, atau sesuatu di antaranya.

Elemen Blok

Elemen blok dimulai pada baris baru dan melebar hingga memenuhi seluruh lebar wadahnya. Anda dapat menetapkan width, height, margin, dan padding di semua sisi.

Elemen blok bawaan: div, p, h1-h6, section, article.

<div>I'm a block element — full width, centered.</div>

Elemen Sebaris

Elemen sebaris mengalir di dalam teks. Elemen ini tidak memulai baris baru. Menetapkan width atau height tidak berdampak. Margin atas dan bawah diabaikan; margin serta padding horizontal tetap berfungsi.

Elemen sebaris bawaan: span, a, strong, em, img.

<p>This is <span>an inline span</span> inside a paragraph.</p>

Elemen Sebaris-Blok

display: inline-block bersifat hibrida. Elemen mengalir secara sebaris (tanpa pemisah baris paksa), tetapi mendukung width, height, dan semua properti model kotak seperti elemen blok.

<a class="btn" href="#">Click Me</a>

Inline-Block untuk Navigasi

Sebelum Flexbox, inline-block digunakan untuk bilah navigasi horizontal. Kekurangannya: spasi kosong dalam sumber HTML membuat celah kecil di antara item.

<ul><li>Home</li><li>About</li><li>Contact</li></ul>

Menghapus Celah Sebaris

Celah spasi kosong di antara elemen inline-block dapat dihapus dengan menetapkan font-size: 0 pada induk dan mengembalikannya pada elemen anak, atau dengan menghilangkan spasi kosong dalam HTML.

<ul><li>One</li><li>Two</li><li>Three</li></ul>

Mengganti Inline-Block dengan Flex

Dalam CSS modern, display: flex pada induk adalah cara yang disarankan untuk membuat tata letak horizontal tanpa masalah spasi kosong. inline-block masih berguna untuk menentukan ukuran satu elemen.

Mengubah display

Jenis display elemen apa pun dapat diubah dengan CSS. Ini biasanya digunakan untuk membuat tautan berbentuk tombol atau membuat item daftar tersusun horizontal.

<a class="button" href="#">Button</a>
<ul><li>Item 1</li><li>Item 2</li></ul>

Nilai display untuk Tabel

CSS menyediakan display: table, display: table-row, display: table-cell, dan sebagainya untuk menerapkan tata letak tabel pada elemen non-tabel. Saat ini jarang diperlukan, tetapi berguna untuk pemusatan vertikal dalam konteks lama.

Akar Alur: display: flow-root

display: flow-root membuat konteks pemformatan blok baru tanpa efek samping overflow: hidden. Properti ini menghapus float dan mencegah keruntuhan margin keluar dari wadah.

<div class="clearfix">Contains floated children without collapsing.</div>

Kotak Anonim

Saat elemen blok dan sebaris bercampur sebagai elemen saudara, peramban membungkus konten sebaris yang terpisah dalam kotak blok anonim. Perilaku ini tidak terlihat, tetapi menjelaskan perubahan tata letak yang tidak terduga.

Pemeriksaan Singkat

Nilai display mana yang memungkinkan Anda menetapkan width sambil mempertahankan elemen dalam alur sebaris?

Ringkasan

Elemen blok menggunakan lebar penuh dan dimulai pada baris baru. Elemen sebaris mengalir bersama teks serta mengabaikan width dan height. Inline-block menggabungkan keduanya: mengalir secara sebaris tetapi menerima width dan height. Tata letak modern lebih mengutamakan Flexbox dan Grid daripada kisi inline-block.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Block vs Inline vs Inline-Block” gratis?

Ya — teks lengkap “Block vs Inline vs Inline-Block” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Block vs Inline vs Inline-Block”?

Pahami perbedaan perilaku tampilan block, inline, dan inline-block. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Block vs Inline vs Inline-Block” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy