Display ~ Pemrograman dan Teknologi

Properti display digunakan untuk menentukan bagaimana elemen HTML ditampilkan. Setiap elemen HTML yang memiliki nilai display bawaannya masing-masing bisa diubah bagaimana tampilannya. Properti ini juga terkait dengan penempatan elemen HTML yang berada di kelompok yang sama. Untuk lebih jelasnya, kita coba dulu properti ini dalam kode HTML sebelum membahasnya.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
    	body * {
            color : red;
            background : yellow;
            height : 64px;
        }

    </style>
</HEAD>
<BODY>
    <h3 style = "display:inline-block">Judul</h3>
    <p style = "display:inline-block">
        Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
    </p>
    <p style = "display:block">
        Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
    </p>
    <p style = "display:inline">
        Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
    </p>
    <BR />
    <p style = "display:inline">
        Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
    </p>
    <p style = "display:inline">
        Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
    </p>
</BODY>
</HTML>

Nilai-nilai yang digunakan di atas adalah nilai properti display yang sering digunakan dan sudah ada sejak properti ini mulai diperkenalkan. Selain itu, ada beberapa nilai lain yang khusus digunakan untuk properti display selain initial dan inherit.

None : menyembunyikan elemen dari tampilan.
Content
Inline : Menampilkan elemen yang tidak terpengaruh properti width dan height. Background hanya ada di belakang teks. Teks dengan display inline akan berada dalam satu baris atau saling bersambung jika tidak ada <BR />
Block : Isi elemen ada di dalam area berbentuk kotak yang bisa diatur panjang dan lebarnya.
Contents : kontainer dari elemen tidak dianggap sehingga background, border, dan padding tidak dirender.
Inline-block : Hampir sama dengan inline. Bedanya, inline block masih bisa diberi ukuran. Jika tulisan cukup pendek dan hanya satu baris, background hanya akan terlihat sepanjang teks.
List-item : Display untuk tampilan isi list, seperti tag <li>
Flex : Tampilan berjajar di satu baris atau kolom. Flex juga bisa diatur perataan posisi isinya.
Grid : Tampilan yang tata letaknya mirip tabel, tapi bisa diubah-ubah kolom dan barisnya tanpa mengubah kode HTML-nya.
Inline-table : versi inline dari table.
Inline-grid : versi inline dari grid.
Inline-flex : versi inline dari flex.
Table : Display untuk tampilan tabel.
Table-caption : Display untuk tampilan caption pada tabel.
Table-cell : Display untuk tampilan cell dari tabel.
Table-column : Display untuk tampilan kolom dari tabel.
Table-row : Display untuk tampilan baris dari tabel.
Run-In : Mirip dengan "float:left". Tapi, mungkin tidak semua browser mendukung nilai display yang satu ini.

Khusus untuk grid dan flex, saya akan membahasnya secara terpisah. Ada beberapa properti lain yang diperlukan jika display bernilai flex atau grid.