Pengertian Display pada CSS

Properti CSS display merupakan salah satu fitur CSS terpenting yang digunakan untuk mengatur tampilan tata letak elemen.

Halaman website tersusun dari berbagai elemen yang berbentuk segi empat atau kotak (baca lebih detail tentang box model.

Bentuk kotak elemen inilah yang mempengaruhinya dalam format visual halaman.

Dengan properti display, kita bisa mengontrol perilaku kotak elemen untuk ditampilkan seperti apa, disembunyikan, atau tidak ditampilkan pada visual halaman.

Secara umum, elemen bisa ditampilkan sesuai nilai display berikut:

display: none vs visibility: hidden
display: block
display: inline
display: inline-block

Yuk kita lanjut ke pembahasannya…

Isi Konten

Display: None vs Visibility: Hidden

Kita bisa menyembunyikan elemen dengan deklarasi display: none.

Selain itu, kita juga bisa menyembunyikan elemen dengan menggunakan deklarasi visibility: hidden.

Namun kedua deklarasi tersebut memiliki perbedaan.

Untuk melihat perbedaannya, saya membuat 3 box seperti ini:

Lalu pada box warna hijau (.box-2) saya sembunyikan dengan deklarasi display: none.

.box-2 {
    background: #c8e6c9;
    display: none;
}

Contoh:

HTML CSS Preview

.flex {
    display: flex;
    background: #f7fafc;
    margin: 4rem;
}
.box {
    width: 100px;
    height: 100px;
    margin: 1rem;
}
.box-1 {
    background: #ffcdd2;
}
.box-2 {
    background: #c8e6c9;
    display: none;
}
.box-3 {
    background: #bbdefb;
}

Sekarang box warna hijau menjadi hilang dari tampilan halaman web.

Sebenarnya box tersebut masih ada dalam struktur HTML, namun dengan display: none menyebabkan elemen seolah-olah terhapus.

Sehingga box warna biru (.box-3) akan bergeser ke kiri dan menggunakan ruang kosong yang sebelumnya ditempati oleh box hijau.

Berbeda halnya jika menggunakan deklarasi visibility: hidden untuk menyembunyikan box warna hijau.

Box hijau tersebut tidak benar-benar hilang, tetapi hanya membuat elemen menjadi tidak tampak.

Sehingga posisi box warna biru (.box-3) masih tetap berada di tempat aslinya.

.box-2 {
    background: #c8e6c9;
    visibility: hidden;
}

Contoh:

HTML CSS Preview

.flex {
    display: flex;
    background: #f7fafc;
    margin: 4rem;
}
.box {
    width: 100px;
    height: 100px;
    margin: 1rem;
}
.box-1 {
    background: #ffcdd2;
}
.box-2 {
    background: #c8e6c9;
    visibility: hidden;
}
.box-3 {
    background: #bbdefb;
}

Block vs. Inline

Pernahkah kamu memperhatikan beberapa tag HTML seperti <div>, <p>, <ul> akan memulainya dengan baris baru dan masing-masing mengambil ruang penuh?

Disisi lain, tag HTML seperti <span>, <img>, atau <a> tidak memulainya dengan baris baru dan bisa ditempatkan berdampingan?

Hal ini bisa terjadi karena perbedaan perilaku display Block dan Inline.

Apa saja perbedaannya?

Mari kita lihat perbedaannya melalui contoh berikut:

Saya membuat template HTML dengan tag <p> dan tag <span> tanpa diberi CSS seperti ini:

<body>
  <p>Ini contoh elemen block dengan tag "&lt;p&gt;"</p>
  <p>Elemen block ini akan membuat baris baru</p>
  <p>Elemen block juga akan mengambil ruang penuh</p>
  <span>Ini elemen inline</span>
  <span>Ini tag "&lt;span&gt;"</span>
  <span>Elemen inline hanya mengambil ruang seperlunya</span>
</body>

Ini hasilnya di browser Chrome

display block vs inline

Dapatkah kamu melihat perbedaannya?

pada masing-masing tag <p> akan dimulai dengan baris baru meski masih tersedia ruang kosong di atasnya.

Sedangkan pada tag <span> hanya mengambil ruang seperlunya dan tidak dimulai dengan baris baru.

Secara default, elemen HTML memiliki perilaku sebagai block atau inline.

Elemen yang selalu dimulai dengan baris baru disebut elemen block-level.

Display: Block

Elemen block adalah elemen yang akan memisahkan diri dari kotak garis elemen lain atau membuat baris baru.

Elemen block biasanya menempati ruang horizontal sebanyak mungkin (tergantung pada elemen block).

Agar lebih mudah dipahami, inilah karakteristik elemen level blok:

Mengambil ruang penuh (lebar 100%) secara default.
Selalu ditampilkan pada baris baru.
Dapat ditentukan lebar dan tingginya dengan properti CSS width dan height.
Dapat mengandung elemen block lain dan elemen inline atau inline-block.

Contoh elemen block yaitu <p>, <ul>, <h1->-<h6>, div>, <section>, dan <header>.

Silahkan cek referensi tentang tag HTML untuk melihat daftar elemen block secara lengkap.

Selama tag <p> sebagai elemen level blok, maka lebar dan tingginya bisa ditentukan dengan properti width dan height.

p {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

Contoh:

HTML CSS Preview

Jika lebarnya tidak ditentukan, maka lebar default <p> akan menjadi 100%.

Display: Inline

Elemen inline (elemen level sebaris) adalah elemen yang mengalir dalam garis tanpa menyebabkannya terpisah.

Elemen inline memiliki karakteristik:

Hanya mengambil ruang kosong yang diperlukan.
Ditampilkan bersanding dengan elemen inline lain.
Tidak menerima pengaturan properti width atau height, dan margin-top atau margin-bottom.
Bisa menjadi induk dari elemen inline lain.

Contoh elemen inline yang sering digunakan misalnya span, em, dan img.

Elemen-elemen tersebut merupakan bagian dari kotak garis dan tidak menyebabkan garis itu terpisah.

Selama tag <p> diatur menjadi elemen level inline, maka penempatannya bisa bersanding dan properti CSS width & height tidak memiliki efek.

p {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  display: inline;
}

Contoh:

HTML CSS Preview

Display: Inline-block

Dalam beberapa kasus, kadang kedua nilai display di atas belum cukup untuk mengatur tampilan desain menjadi lebih baik.

Solusinya bisa menggunakan kombinasi dari karakteristik nilai display block dan inline menjadi display: inline-block.

Sehingga elemen inline block bisa ditentukan lebar dan tingginya menggunakan properti width & height.

Dan elemen ini hanya mengambil ruang seperlunya, jadi tidak dimulai dari baris baru.

Sebagai contoh, saya akan mengatur tag <p> menjadi elemen inline block seperti berikut:

p {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  display: inline-block;
}

Contoh:

HTML CSS Preview

Sekarang elemen paragraf bisa ditempatkan bersanding dan lebar & tingginya juga bisa ditentukan.

Daftar Nilai Display Secara Lengkap

display: none;

Elemen ini sepenuhnya dihapus, seolah-olah tidak ada dalam kode HTML di tempat pertama.

display: inline;

Elemen diubah menjadi elemen inline: berperilaku seperti teks sederhana.

width dan height yang diterapkan tidak akan berpengaruh.

display: block;

Elemen diubah menjadi elemen blok: dimulai pada baris baru, dan mengambil seluruh lebar yang tersedia.

display: inline-block;

Elemen ini membagikan properti elemen inline dan block:

inline karena elemen berperilaku seperti teks sederhana, dan menyisipkan dirinya dalam blok teks
block karena kamu dapat menerapkan nilai width dan height.

Sebagai contoh, elemen ini memiliki

.element{
  height: 3em;
  width: 60px;
}

display: list-item;

Elemen berperilaku seperti list item: <li>. Satu-satunya perbedaan dengan block yaitu item daftar memiliki bullet point.

display: table;

Elemen berperilaku seperti tabel: <table>.

Konten dan elemen turunannya berperilaku seperti sel tabel

display: table-cell;

Elemen berperilaku seperti sel tabel: <td> atau <th>.

Konten dan elemen turunannya berperilaku seperti sel tabel.

display: table-row;

Elemen berperilaku seperti baris tabel: <tr>.

Konten dan elemen turunannya berperilaku seperti sel tabel.

display: flex;

Elemen diubah menjadi wadah flexbox. Dengan sendirinya, ia berperilaku seperti elemen blok.

Elemen turunannya akan diubah menjadi item flexbox.

display: inline-flex;

Elemen ini membagikan properti elemen inline dan flexbox:

inline karena elemen berperilaku seperti teks sederhana, dan menyisipkan dirinya dalam blok teks
flexbox karena elemen turunannya akan diubah menjadi item-item flexbox

Sebagai contoh, elemen ini memiliki:

.element{
  height: 3em;
  width: 120px;
}

display: grid;

Elemen diubah menjadi wadah grid. Dengan sendirinya, ia berperilaku seperti elemen blok.

Elemen turunannya akan diubah menjadi grid items.

display: inline-grid;

Elemen ini membagikan properti elemen inline dan grid:

inline karena elemen berperilaku seperti teks sederhana, dan menyisipkan dirinya dalam blok teks
block karena elemen turunannya akan diubah menjadi item flexbox

Sebagai contoh, elemen ini memiliki:

.element{
  height: 3em;
  width: 120px;
}