Atribut display CSS

Definisi dan penggunaan

Atribut display menentukan tipe kotak tampilan yang harus dihasilkan oleh elemen.

Pengertian

Atribut ini digunakan untuk mendefinisikan tipe kotak tampilan yang dihasilkan oleh elemen saat membangun layout. Untuk jenis dokumen seperti HTML, penggunaan display yang tidak berhati-hati dapat berbahaya karena dapat melanggar hierarki tampilan yang sudah ditentukan di HTML. Untuk XML, karena XML tidak memiliki hierarki seperti ini secara internal, semua display adalah penting.

Keterangan:Ada nilai compact dan marker di CSS2, namun karena kekurangan dukungan yang luas, sudah dihapus dari CSS2.1.

Lihat pula:

Panduan CSS:Posisi CSS

Panduan HTML DOM:Atribut display

Contoh

Buat paragraf berisi kotak dalam teks:

p.inline
  {
  display:inline;
  }

Coba sendiri

Sintaks CSS

display: value;

Nilai atribut

Nilai Deskripsi
none Elemen ini tidak akan ditampilkan.
block Elemen ini akan ditampilkan sebagai elemen blok, dan di depan dan belakang elemen akan ada paragraf pemisah.
inline Default. Elemen ini akan ditampilkan sebagai elemen inline, tanpa paragraf pemisah di depan dan belakang elemen.
inline-block Elemen blok dalam teks (nilai yang ditambahkan di CSS2.1).
list-item Elemen ini akan ditampilkan sebagai daftar.
run-in Elemen ini akan ditampilkan sebagai elemen blok atau elemen inline berdasarkan konteks.
compact Ada nilai compact di CSS, namun karena kekurangan dukungan yang luas, sudah dihapus dari CSS2.1.
marker Ada nilai marker di CSS, tetapi karena kekurangan dukungan yang luas, sudah dihapus dari CSS2.1.
table Elemen ini akan ditampilkan sebagai tabel blok (seperti <table>), dengan karakter enter di depan dan belakang tabel
inline-table Elemen ini akan ditampilkan sebagai tabel inline (seperti <table>), tanpa karakter enter di depan dan belakang tabel
table-row-group Elemen ini akan ditampilkan sebagai grup baris satu atau lebih (seperti <tbody>)
table-header-group Elemen ini akan ditampilkan sebagai grup baris satu atau lebih (seperti <thead>)
table-footer-group Elemen ini akan ditampilkan sebagai grup baris satu atau lebih (seperti <tfoot>)
table-row Elemen ini akan ditampilkan sebagai baris tabel satu atau lebih (seperti <tr>)
table-column-group Elemen ini akan ditampilkan sebagai grup kolom satu atau lebih (seperti <colgroup>)
table-column Elemen ini akan ditampilkan sebagai kolom sel (seperti <col>)
table-cell Elemen ini akan ditampilkan sebagai sel tabel (seperti <td> dan <th>)
table-caption Elemen ini akan ditampilkan sebagai judul tabel (seperti <caption>)
inherit Ditentukan bahwa nilai atribut display harus diwarisi dari elemen orang tua.

Detil Teknologi

Nilai Default: inline
Inheritsi: no
Versi: CSS1
Syarat JavaScript: object.style.display="inline"

Contoh TIY

Bagaimana cara menampilkan elemen sebagai elemen inline
Contoh ini menunjukkan bagaimana cara menampilkan elemen sebagai elemen inline.
Bagaimana cara menampilkan elemen sebagai elemen blok
Contoh ini menunjukkan bagaimana cara menampilkan elemen sebagai elemen blok.

Dukungan peramban

Angka di tabel menunjukkan versi peramban pertama yang mendukung atribut ini penuh.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Keterangan:Jika disetel !DOCTYPE, Internet Explorer 8 (dan versi yang lebih tinggi) mendukung nilai atribut "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", serta "inherit".