Properti tampilan CSS
Contoh
Penggunaan beberapa nilai tampilan yang berbeda:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti displaymenentukan perilaku tampilan (tipe kotak rendering) dari suatu elemen.
Dalam HTML, nilai properti tampilan default diambil dari spesifikasi HTML atau dari lembar gaya default browser/pengguna. Nilai default dalam XML adalah inline, termasuk elemen SVG.
| Nilai bawaan: | ? |
|---|---|
| Diwarisi: | tidak |
| Animasi: | tidak. Baca tentang animasi |
| Versi: kapan: | CSS1 |
| Sintaks JavaScript: | objek .style.display="none" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Property | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Catatan: Nilai "flex" dan "inline-flex" memerlukan awalan -webkit- agar berfungsi di Safari.
Catatan: "tampilan: konten" tidak berfungsi di Edge versi 79 sebelumnya.
Sintaks CSS
display: value;
Nilai properti
| Value | Description | Play it |
|---|---|---|
| inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect | |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
| flex | Displays an element as a block-level flex container | |
| grid | Displays an element as a block-level grid container | |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
| inline-flex | Displays an element as an inline-level flex container | |
| inline-grid | Displays an element as an inline-level grid container | |
| inline-table | The element is displayed as an inline-level table | |
| list-item | Let the element behave like a <li> element | |
| run-in | Displays an element as either block or inline, depending on context | |
| table | Let the element behave like a <table> element | |
| table-caption | Let the element behave like a <caption> element | |
| table-column-group | Let the element behave like a <colgroup> element | |
| table-header-group | Let the element behave like a <thead> element | |
| table-footer-group | Let the element behave like a <tfoot> element | |
| table-row-group | Let the element behave like a <tbody> element | |
| table-cell | Let the element behave like a <td> element | |
| table-column | Let the element behave like a <col> element | |
| table-row | Let the element behave like a <tr> element | |
| none | The element is completely removed | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Demonstrasi cara menggunakan nilai properti isi. Dalam contoh berikut, penampung .a akan menghilang, dan membuat elemen anak (.b) anak dari elemen naik level berikutnya di DOM:
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Contoh
Demonstrasi tentang cara menggunakan nilai properti warisan:
body {
display: inline;
}
p {
display: inherit;
}
Contoh
Atur arah beberapa item fleksibel di dalam elemen <div> dalam urutan terbalik:
div {
display: flex;
flex-direction: row-reverse;
}
Halaman Terkait
Tutorial CSS: Tampilan dan visibilitas CSS
Referensi DOM HTML: properti tampilan