Properti display
adalah properti CSS yang paling penting untuk mengatur tata letak (layout).
Properti display
Properti display
pada CSS dapat berguna untuk mengatur tampilnya suatu elemen.
Setiap elemen HTML memiliki nilai properti display
default bergantung pada jenis elemennya. Nilai properti display
default untuk sebagian besar elemen adalah block
atau inline
.
Elemen Yang Merupakan block-level
Elemen yang merupakan block-level selalu akan memulai baris baru dan menggunakan lebar penuh dari halaman (membentang ke kiri dan kanan sejauh mungkin). Semua elemen block-level mempunya properti display
secara default bernilai block
.
Contoh elemen block-level:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Elemen Inline
Elemen inline tidak memulai baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan. Semua elemen inline mempunya properti display
secara default bernilai inline
.
Ini adalah inline pada elemen <span> di dalam sebuah paragraf.
Contoh elemen inline:
- <span>
- <a>
- <img>
Mengganti Nilai Properti Display
Seperti yang telah dipelajari, setiap elemen memiliki nilai properti display secara default. Namun nilai tersebut dapat diubah/diganti sesuai dengan kebutuhan.
Mengubah elemen inline menjadi elemen block, atau sebaliknya dapat berguna untuk membuat halaman terlihat dengan cara yang berbeda.
Contoh umumnya adalah membuat elemen <li>
menjadi inline untuk menampilkan secara horizontal:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Tampilkan daftar tautan sebagai menu horizontal:</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body></html>
Berikut merupakan contoh menampilkan elemen <span> menggunakan properti display:block; :
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<h1>Tampilkan elemen span sebagai elemen blok</h1>
<span>Properti display dengan</span> <span>nilai "block" menghasilkan</span> <span>garis pemisah antara setiap elemen.</span>
</body></html>
Berikut merupakan contoh menampilkan elemen <a> menggunakan properti display:block; :
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: block;
}
</style>
</head>
<body>
<h1>Tampilkan tautan sebagai elemen blok</h1>
<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>
</body></html>
Menyembunyikan Elemen
Menyembunyikan elemen dapat dilakukan dengan mengatur properti display
ke none
. Elemen akan hilang/disembunyikan (hidden) jika menggunakan properti display:none, dan halaman akan ditampilkan seolah-olah elemen tersebut tidak ada:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Ini adalah judul yang terlihat</h1>
<h1 class="hidden">Ini adalah judul yang tidak terlihat</h1>
<p>Perhatikan bahwa elemen h1 dengan display: none tidak memakan ruang apa pun.</p>
</body></html>
Properti visibility: hidden;
juga dapat menyembunyikan elemen.
Namun, elemen akan tetap menggunakan ruang yang sama seperti sebelumnya. Elemen akan hilang (hidden), tetapi tetap tidak akan mengubah tata letak (layout):
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Ini adalah judul yang terlihat</h1>
<h1 class="hidden">Ini adalah judul yang tidak terlihat</h1>
<p>Perhatikan bahwa judul dengan visibility: hidden masih menggunakan ruang.</p>
</body></html>
Referensi Properti CSS display dan visibility
- display : Dapat berguna untuk mengatur tampilnya suatu elemen
- visibility : Dapat digunakan untuk mengatur ada atau tidaknya suatu elemen pada tampilan
Properti CSS display
Contoh
Penggunaan beberapa nilai yang berbeda dengan menggunakan properti display:
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>Properti display</h1>
<h2>display: none</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: block</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline-block</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body></html>
Definisi dan Penggunaan
Properti display
dapat berguna untuk mengatur tampilnya suatu elemen.
Nilai properti
- inline : Menampilkan elemen sebaris (seperti <span>) sehingga properti width atau height tidak akan berpengaruh
- block : Menampilkan elemen sebagai elemen block (seperti <p>) dan dimulai dengan baris baru dan menempati seluruh lebar tampilan
- contents : Membuat elemen penampung menghilang, membuat elemen anak menjadi anak dari elemen tingkat berikutnya di DOM
- flex : Menampilkan elemen sebagai wadah secara fleksibel
- grid : Menampilkan elemen sebagai wadah kotak
- inline-block : Menampilkan elemen sebagai wadah secara inline sehingga elemen itu sendiri diformat sebagai elemen inline, tetapi masih dapat menerapkan nilai tinggi dan lebar
- inline-flex : Menampilkan elemen sebagai wadah secara fleksibel tingkat sebaris
- inline-grid : Menampilkan elemen sebagai wadah kisi tingkat sebaris
- inline-table : Elemen ditampilkan sebagai tabel tingkat sebaris
- list-item : Membuat elemen berperilaku seperti elemen <li>
- run-in : Menampilkan elemen sebagai block atau inline, bergantung pada konteksnya
- table : Membuat elemen berperilaku seperti elemen <table>
- table-caption : Membuat elemen berperilaku seperti elemen <caption>
- table-column-group : Membuat elemen berperilaku seperti elemen <colgroup>
- table-header-group : Membuat elemen berperilaku seperti elemen <thead>
- table-footer-group : Membuat elemen berperilaku seperti elemen <tfoot>
- table-row-group : Membuat elemen berperilaku seperti elemen <tbody>
- table-cell : Membuat elemen berperilaku seperti elemen <td>
- table-column : Membuat elemen berperilaku seperti elemen <col>
- table-row : Membuat elemen berperilaku seperti elemen <tr>
- none : Elemen tersebut benar-benar dihilangkan
- initial : Atur properti ini ke nilai defaultnya
- inherit : Mewarisi properti ini dari elemen induknya
Contoh
Dalam contoh berikut, penampung class .a akan hilang, dan menjadikan class .b sebagai elemen berikutnya di DOM:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
display: contents;
border: 1px solid red;
background-color: lightgrey;
padding: 10px;
width: 200px;
}
.b {
border: 1px solid blue;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<h1>Properti tampilan</h1>
<h2>display: contents</h2>
<div class= "a">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. <div class="b">HELLO WORLD!</div> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<p>display: contents tidak berfungsi di Edge, versi sebelumnya 79.</p>
</body></html>
Contoh
Cara menggunakan nilai properti display inherit:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: inline;
}
p {
display: inherit;
}
</style>
</head>
<body>
<p>Kedua paragraf ini menghasilkan kotak sebaris, dan menghasilkan</p>
<p>tidak ada jarak antara dua elemen.</p>
</body></html>
Contoh
Tetapkan arah dengan beberapa item secara fleksibel di dalam elemen <div> dalam urutan terbalik:
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 400px;
height: 400px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
}
#main div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>Properti flex-direction</h1>
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
<p><b>Catatan:</b> Internet Explorer 10 dan versi sebelumnya tidak mendukung properti flex-direction.</p>
</body></html>
Properti CSS Visibility
Contoh
Buat elemen <h2> menjadi terlihat dan hidden:
<!DOCTYPE html>
<html>
<head>
<style>
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Properti visibility</h1>
<h2 class="a">Judul ini terlihat</h2>
<h2 class="b">Judul ini tidak terlihat</h2>
<p>Perhatikan bahwa elemen dengan visibility: hidden masih menggunakan ruang di halaman.</p>
</body></html>
Definisi dan Penggunaan
Properti visibility
dapat digunakan untuk mengatur ada atau tidaknya suatu elemen pada tampilan.
Tips: Elemen tersebut tetap menggunakan ruang di halaman. Gunakan properti display untuk menyembunyikan dan menghapus elemen dari tata letak (layout) dokumen.
Nilai properti
- visible : Nilai default dan elemennya terlihat
- hidden : Elemennya tersembunyi (tetapi masih memakan ruang)
- collapse : Hanya untuk baris tabel (<tr>), grup baris (<tbody>), kolom (<col>), grup kolom (<colgroup>). Nilai ini menghapus baris atau kolom, tetapi tidak memengaruhi tata letak tabel. Ruang yang diambil oleh baris atau kolom akan tersedia untuk konten lain.
Jika digunakan pada elemen lain, maka akan dirender sebagai “hidden”. - initial : Setel properti ini ke nilai defaultnya
- inherit : Mewarisi properti ini dari elemen induknya
Contoh
Contoh ini menunjukkan cara membuat elemen tabel :
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
tr.collapse {
visibility: collapse;
}
</style>
</head>
<body>
<h1>Properti visibility</h1>
<table>
<tr>
<td>Petrus</td>
<td>Griffin</td>
</tr>
<tr class="collapse">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body></html>
Menggunakan width, max-width dan margin: auto;
Seperti yang telah dipelajari sebelumnya, elemen block-level selalu menggunakan lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Mengatur width
dari elemen block-level akan mencegah lebar elemen keluar dari tepi halaman. Kemudian, atur margin secara auto, untuk posisi horizontal pada elemen yang menjadi wadahnya. Dengan begitu elemen secara otomatis akan mengambil lebar tertentu dan ruang yang tersisa akan dibagi sama antara kedua margin.
Catatan: Masalah dengan solusi di atas masih akan terjadi ketika jendela browser lebih kecil dari lebar elemen. Browser kemudian akan menambahkan scrollbar secara horizontal ke halaman.
Maka gunakan max-width
sebagai solusinya, dalam situasi ini, akan meningkatkan penanganan oleh browser pada layar yang kecil. Ini penting saat membuat situs yang dapat menangani browser dari perangkat kecil seperti perangkat mobile.
Perhatikan contoh dua div di bawah ini agar lebih jelas.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Properti max-width</h2>
<div class="ex1">Elemen div ini memiliki width: 500px;</div>
<br>
<div class="ex2">Elemen div ini memiliki lebar max-width: 500px;</div>
<p><strong>Tips:</strong> Seret jendela browser sehingga lebarnya kurang dari 500px, untuk melihat perbedaan antara
dua div!</p>
</body></html>
Tutorial sebelumnya : Referensi Semua Properti CSS Table
Tutorial setelahnya : Properti Position CSS
Semua Tutorial CSS : Tutorial CSS