Cara Menggunakan Display di CSS: Inline, Block, Inline-Block, dan None

Dalam dunia pengembangan web, CSS display adalah salah satu properti yang paling penting untuk mengatur tampilan elemen di halaman. Properti ini menentukan bagaimana elemen ditampilkan dan berinteraksi dengan elemen lain di sekitarnya.

Melalui artikel ini, kamu akan mempelajari cara menggunakan display di CSS secara mendalam — termasuk tipe-tipe utama seperti inline, block, inline-block, dan none. Panduan ini juga disertai contoh kode, penjelasan visual, serta tips praktik terbaik agar kamu bisa memahami perbedaan dan penerapannya dengan mudah.

Baca juga: Tutorial CSS Position Lengkap: Static, Relative, Absolute, Fixed, dan Sticky

Apa Itu Display CSS?

Display CSS adalah properti yang digunakan untuk menentukan bagaimana elemen HTML ditampilkan di halaman web.
Setiap elemen HTML memiliki nilai display default, misalnya:

• Elemen seperti <div>, <section>, dan <p> secara default adalah block.
• Elemen seperti <span>, <a>, dan <img> secara default adalah inline.

Namun, kamu bisa mengubah perilaku default ini dengan properti:

display: inline;
display: block;
display: inline-block;
display: none;Code language: HTTP (http)

Properti ini memengaruhi layout, flow elemen, dan bagaimana browser merender struktur halaman.

Jenis-Jenis Display CSS

Berikut ini empat jenis display yang paling umum digunakan:

1. display: block;
2. display: inline;
3. display: inline-block;
4. display: none;

Selain itu, ada juga beberapa tipe modern seperti flex dan grid, namun fokus artikel ini adalah pada empat tipe dasar yang paling sering digunakan untuk membangun struktur halaman web.

Display Block CSS

Elemen dengan display: block; akan menempati seluruh lebar yang tersedia dan dimulai pada baris baru.

Contoh elemen HTML yang secara default memiliki display block:

• <div>
• <p>
• <header>
• <section>
• <footer>
• <h1> sampai <h6>

Contoh:

<div style="background-color: lightblue;">Elemen 1</div>
<div style="background-color: lightcoral;">Elemen 2</div>Code language: HTML, XML (xml)

Hasilnya:

• Kedua elemen tampil di baris terpisah.
• Masing-masing mengambil lebar penuh kontainer.

Kamu juga bisa mengubah elemen inline seperti <span> menjadi block dengan CSS:

span {
    display: block;
}Code language: CSS (css)

Kapan digunakan:
Gunakan display: block ketika kamu ingin elemen menempati satu baris penuh, seperti untuk paragraf, container utama, atau card layout.

Display Inline CSS

Elemen dengan display: inline; hanya mengambil lebar sesuai isi kontennya, dan tidak dimulai di baris baru.

Contoh elemen HTML inline secara default:

• <span>
• <a>
• <strong>
• <em>

Contoh:

<span style="background-color: lightgreen;">Inline 1</span>
<span style="background-color: lightpink;">Inline 2</span>Code language: HTML, XML (xml)

Hasilnya:

• Kedua elemen berada dalam satu baris.
• Tidak bisa diatur width atau height karena mengikuti isi teks.

Catatan:
Inline tidak bisa menerima properti layout seperti margin-top atau margin-bottom, hanya margin-left dan margin-right.

Kapan digunakan:
Cocok untuk teks atau elemen kecil seperti tautan dan label.

Display Inline-Block CSS

inline-block adalah gabungan dari inline dan block.
Elemen akan tampil sejajar dalam satu baris seperti inline, namun tetap bisa diatur ukuran (width & height) seperti block.

Contoh:

<span style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">Box 1</span>
<span style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral;">Box 2</span>Code language: HTML, XML (xml)

Hasilnya:

• Elemen tetap dalam satu baris.
• Ukurannya bisa diatur.
• Cocok untuk membuat layout sejajar seperti menu navigasi.

Kapan digunakan:
Ideal untuk membuat horizontal layout seperti tombol, navigasi, atau kartu kecil.

Display None CSS

display: none; digunakan untuk menyembunyikan elemen sepenuhnya dari halaman.
Berbeda dengan visibility: hidden; yang masih menyisakan ruang kosong, display: none menghapus elemen dari flow layout sepenuhnya.

Contoh:

.hidden {
    display: none;
}Code language: CSS (css)

<p>Paragraf ini terlihat.</p>
<p class="hidden">Paragraf ini disembunyikan.</p>
<p>Paragraf berikutnya naik ke atas.</p>Code language: HTML, XML (xml)

Hasilnya: Elemen dengan class .hidden tidak muncul sama sekali.

Kapan digunakan:
Cocok untuk membuat fitur dropdown, modal, atau navigasi mobile yang ditampilkan secara dinamis dengan JavaScript.

Perbandingan Display Inline, Block, Inline-Block, dan None

Jenis Display	Baris Baru	Dapat Diatur Width/Height	Terlihat di Halaman	Kegunaan Umum
Block	✅	✅	✅	Struktur utama layout
Inline	❌	❌	✅	Teks, link, label
Inline-Block	❌	✅	✅	Tombol, menu sejajar
None	❌	❌	❌	Menyembunyikan elemen

Contoh Lengkap Penggunaan Display CSS

Berikut contoh layout sederhana menggunakan berbagai display:

<style>
.container {
    background-color: #f3f3f3;
    padding: 10px;
}

.block {
    display: block;
    background-color: lightblue;
    margin-bottom: 10px;
}

.inline {
    display: inline;
    background-color: lightgreen;
}

.inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: lightcoral;
    text-align: center;
    margin-right: 5px;
}

.none {
    display: none;
}
</style>

<div class="container">
    <div class="block">Display: Block</div>
    <span class="inline">Display: Inline</span>
    <span class="inline-block">Inline-Block 1</span>
    <span class="inline-block">Inline-Block 2</span>
    <p class="none">Ini tidak akan muncul</p>
</div>Code language: HTML, XML (xml)

Perbedaan Display Inline vs Inline-Block

Fitur	Inline	Inline-Block
Baris baru	Tidak	Tidak
Ukuran dapat diatur	Tidak	Ya
Bisa diberi margin/padding atas-bawah	Tidak	Ya
Digunakan untuk	Teks, ikon kecil	Tombol, menu, card kecil

Gunakan inline-block jika kamu ingin elemen sejajar tetapi bisa diatur ukurannya.

Menggunakan Display None dan Visibility Hidden

Perbedaan utama:

• display: none; → elemen hilang dan tidak memakan ruang.
• visibility: hidden; → elemen tidak terlihat tapi ruangnya tetap ada.

.none {
    display: none;
}

.hidden {
    visibility: hidden;
}Code language: CSS (css)

<p>Elemen ini terlihat.</p>
<p class="none">Elemen ini tidak muncul.</p>
<p class="hidden">Elemen ini tidak terlihat tapi masih ada ruangnya.</p>Code language: HTML, XML (xml)

Display Property CSS Modern

Selain empat tipe di atas, CSS modern memiliki tipe display lainnya seperti:

• display: flex; → digunakan untuk membuat layout fleksibel (Flexbox)
• display: grid; → digunakan untuk membuat layout kompleks dengan grid
• display: table; → meniru perilaku tabel HTML
• display: contents; → membuat elemen transparan terhadap layout

Contoh flex:

.container {
    display: flex;
    justify-content: space-between;
}Code language: CSS (css)

CSS Flow Layout: Dasar dari Display

Setiap elemen di halaman web mengikuti CSS flow layout:

• Elemen block mengalir dari atas ke bawah.
• Elemen inline mengalir dari kiri ke kanan.

Dengan mengubah display, kamu bisa memengaruhi bagaimana aliran ini bekerja.

Tips Menggunakan Display CSS

• Gunakan inline-block untuk kombinasi fleksibilitas dan kesederhanaan.
• Hindari display: none untuk SEO penting — elemen tersembunyi tidak akan dibaca oleh mesin pencari.
• Gunakan flex atau grid untuk layout modern responsif.
• Hindari kombinasi display dengan float tanpa alasan kuat.
• Gunakan display: block untuk membuat tombol <a> atau <span> bisa diklik seluruh area.

Contoh Layout Sederhana Menggunakan Display

<nav>
    <a href="#" class="menu">Home</a>
    <a href="#" class="menu">Artikel</a>
    <a href="#" class="menu">Kontak</a>
</nav>Code language: HTML, XML (xml)

.menu {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2196f3;
    color: white;
    text-decoration: none;
    margin-right: 5px;
}
.menu:hover {
    background-color: #0b79d0;
}Code language: CSS (css)

Tampilan: menu horizontal rapi menggunakan inline-block.

Kesimpulan

Properti display CSS adalah pondasi penting dalam membuat layout web.

Dengan memahami perbedaan antara inline, block, inline-block, dan none, kamu bisa mengatur tata letak elemen dengan presisi dan efisiensi.

Tipe	Ciri Utama	Kapan Digunakan
block	Elemen menempati baris penuh	Struktur utama layout
inline	Sejajar dalam baris, tanpa kontrol ukuran	Teks, label, link
inline-block	Sejajar tapi bisa diatur ukurannya	Navigasi, tombol
none	Menyembunyikan elemen	Menu dropdown, modal

Memahami cara kerja display di CSS adalah langkah awal untuk menjadi front-end developer yang andal.