Skip to main content

B.4.2.5. Display

Secara umum, properti display menentukan bagaimana sebuah elemen akan tampil di halaman web, apakah dia akan sejajar dengan elemen lain, memulai baris baru, atau bahkan hilang dari tampilan sama sekali. Properti ini memiliki beberapa nilai penting yang sering digunakan, di antaranya:

B.4.2.5.1. block ​

Elemen dengan display block akan mengambil seluruh lebar kontainer induknya (parent). Biasanya, elemen-elemen seperti <div>, <header>, atau <section> secara default menggunakan display block.

<div class="block-element"></div>
<div class="element-2"></div>

Di sini, elemen dengan class block-element akan mengambil lebar penuh dan memulai baris baru. Jika temen-temen buka di web browser maka hasilnya akan terlihat seperti:

Output

Bisa temen-temen perhatikan, kedua <div> di atas akan membentuk sebuah blok atau tumpukan dan di tempatkan di baris yang baru atau baris yang berbeda.

B.4.2.5.2. inline ​

Kalau elemen block memulai baris baru, elemen inline tetap berada dalam satu baris bersama elemen lainnya. Elemen-elemen seperti <span>, <a>, atau <strong> secara default menggunakan display inline.

Output

Bisa temen-temen perhatikan, bahwasannya disini kita memiliki dua elemen <p> yang ketika di tampilkan di web browser maka kedua elemen tersebut akan di tampilkan dalam dua baris yang berbeda, nah ini karena secara bawaan elemen <p> termasuk kedalam block level element. Tapi, kita bisa membuat kedua elemen tersebut menjadi samping-sampingan loh. Gimana caranya? coba temen-temen ubah displaynya, sepeti pada kode di bawah ini.

<p class="inline-element">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, quas.
</p>
<p class="inline-element">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, quas.
</p>

Dengan inline, kedua elemen tadi hanya akan selebar kontennya dan bisa berada di satu baris bersama. Coba kita lihat hasilnya:

Output

Bisa temen-temen lihat, sekarang kedua elemen sebelumnya di tampilkan dalam satu baris.

B.4.2.5.3. inline-block ​

Ini adalah kombinasi dari block dan inline. Elemen dengan display inline-block bisa berada di satu baris bersama elemen lain (seperti inline), tapi kita masih bisa mengatur ukuran elemen (seperti block).

Sebagai contoh, kita akan coba mengambil contoh case dari kedua <div> yang digunakan pada poin nomor 1. Apakah bisa kita membuat dua <div> itu berada di baris yang sama? jawabannya adalah bisa. Coba kita sedikit modifikasi kodenya:

<div class="inline-block-element"></div>
<div class="element-2"></div>

Kita lakukan sedikit penyesuaian pada kode, dimana class nya kita ubah menjadi inline-block-element, display nya kita ubah menjadi inline-block dan lebarnya kita set ke 300px. Maka ketika temen-temen lihat di web browser, kedua <div> sebelumnya akan di tempatkan pada baris yang sama.

Output

B.4.2.5.4. none ​

Kalau temen-temen tidak ingin menampilkan elemen di halaman, kita bisa gunakan display: none;. Elemen ini akan benar-benar hilang, seolah tidak ada di HTML.

.hidden-element {
  display: none;
  width: 200px;
  height: 200px;
  background-color: blueviolet;
}

Elemen ini tidak akan muncul di tampilan dan tidak mengambil ruang sama sekali.

B.4.2.5.5. flex ​

flex adalah nilai display yang sangat powerful dan sering digunakan untuk membuat layout yang fleksibel. Dengan display: flex;, temen-temen bisa mengatur elemen-elemen dalam kontainer agar bisa sejajar secara horizontal atau vertikal dengan lebih mudah.

Flexbox memungkinkan kita untuk mengatur lebar, tinggi, dan posisi elemen dengan lebih fleksibel dibanding metode tradisional.

Contohnya, kita akan buat dua <div> yang kita beri kelas flex-child dan kita bungkus kedua <div> tersebut dengan sebuah <div> lalu kita beri nama class flex-container. Nah setelahnya, temen-temen bisa coba tambahkan kode css di bawah ini.

<div class="flex-container">
  <div class="flex-child"></div>
  <div class="flex-child"></div>
</div>

Di sini, elemen-elemen dalam kontainer akan sejajar secara horizontal dan tersebar merata di dalam kontainer.

Output

Sebenarnya, masih ada satu display yang belum kita bahas pada chapter ini yaitu grid, dan penggunaan display flex lebih advance lagi yang akan kita bahas pada chapter B.7. CSS Layouting .

info

Source code pada chapter ini tersedia di GitHub.
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.2-box-styling/B.4.2.5-display