Mengenal Properti CSS Display dan Nilai-nilainya

 

CSS Display

CSS Display adalah properti CSS yang menentukan perilaku tampilan (jenis kotak rendering) dari sebuah elemen. Dengan properti ini, kita bisa mengatur apakah elemen tersebut ditampilkan sebagai kotak blok atau kotak sebaris, dan jenis layout yang digunakan untuk anak-anak elemennya, seperti layout alir, grid, atau flex.

Properti display memiliki banyak nilai yang bisa kita gunakan untuk mengubah tampilan elemen sesuai kebutuhan kita. Nilai-nilai ini bisa dibagi menjadi beberapa kategori, yaitu:

Outside Display

Nilai outside display menentukan jenis tampilan luar dari elemen, yaitu perannya dalam layout alir. Ada dua nilai outside display yang umum digunakan, yaitu:

• block: Elemen menghasilkan kotak blok, yang memicu jeda baris sebelum dan sesudah elemen ketika berada dalam alir normal. Elemen ini memenuhi seluruh lebar yang tersedia.
• inline: Elemen menghasilkan satu atau lebih kotak sebaris, yang tidak memicu jeda baris sebelum dan sesudahnya. Elemen ini hanya memenuhi lebar yang dibutuhkan oleh kontennya.

Contoh penggunaan nilai outside display:

Inside Display

Nilai inside display menentukan jenis tampilan dalam dari elemen, yaitu jenis konteks pemformatan yang digunakan untuk meletakkan konten-kontennya (asumsinya elemen tersebut bukan elemen pengganti). Ada beberapa nilai inside display yang bisa kita gunakan, antara lain:

• flow: Elemen meletakkan kontennya menggunakan layout alir (layout blok dan sebaris). Jika jenis tampilan luarnya adalah inline atau run-in, dan berpartisipasi dalam konteks pemformatan blok atau sebaris, maka ia menghasilkan kotak sebaris. Jika tidak, ia menghasilkan kotak kontainer blok. Bergantung pada nilai properti lain (seperti position, float, atau overflow) dan apakah ia sendiri berpartisipasi dalam konteks pemformatan blok atau sebaris, ia bisa menetapkan konteks pemformatan blok baru (BFC) untuk kontennya atau mengintegrasikan kontennya ke dalam konteks pemformatan induknya.
• flex: Elemen meletakkan kontennya menggunakan layout flex. Elemen ini menghasilkan kotak kontainer flex dan menetapkan konteks pemformatan flex baru untuk kontennya.
• grid: Elemen meletakkan kontennya menggunakan layout grid. Elemen ini menghasilkan kotak kontainer grid dan menetapkan konteks pemformatan grid baru untuk kontennya.

Contoh penggunaan nilai inside display:

Box Generation

Nilai box generation menentukan apakah elemen tersebut menghasilkan kotak atau tidak. Ada dua nilai box generation yang bisa kita gunakan, yaitu:

• none: Elemen tidak menghasilkan kotak sama sekali. Elemen ini tidak ditampilkan di layar dan tidak berpengaruh pada layout.
• contents: Elemen membuat kontainernya hilang, sehingga anak-anak elemennya menjadi anak-anak dari elemen di level atasnya dalam DOM.

Contoh penggunaan nilai box generation:

Multi-keyword Syntax

Kita juga bisa menggunakan sintaks multi-keyword untuk properti display, yaitu dengan menggabungkan nilai outside display dan inside display secara bersamaan. Contohnya:

Other Values

Selain nilai-nilai di atas, properti display juga memiliki beberapa nilai lain yang bisa kita gunakan untuk membuat elemen berperilaku seperti elemen tabel atau elemen daftar. Contohnya:

Demikianlah penjelasan singkat tentang properti CSS Display. Semoga bermanfaat! 😊