Codingku

display

Properti CSS display digunakan untuk menentukan jenis kotak apa yang dihasilkan untuk elemen pada halaman website.

Setiap elemen pada halaman web berbentuk segi empat (lihat lebih detail tentang box-sizing).

Jenis kotak suatu elemen inilah yang akhirnya mempengaruhi perilakunya dalam format visual halaman.

Ada dua format kotak utama dalam CSS: inline dan block.

Kotak inline (elemen level sebaris) adalah kotak yang mengalir dalam garis tanpa menyebabkannya terpisah.

Contoh yang sering digunakan misalnya span, em, dan img.

Elemen-elemen tersebut merupakan bagian dari kotak garis dan tidak menyebabkan garis itu terpisah.

Elemen “level-inline” bisa diberi padding dan margin, tetapi tidak dapat memiliki width dan height.

Memberi padding dan margin pada elemen inline akan mendorong elemen lain pada garis secara horizontal, tetapi tidak secara vertikal.

Jika kamu ingin mengatur width dan height pada elemen level-inline, kamu harus menggunakan properti inline-block.

Elemen inline-block mirip dengan elemen inline, tetapi bisa menerima nilai lebar dan tinggi.

Lebar dan tinggi elemen inline-block akan mendorong elemen di sekitarnya secara horizontal dan vertikal sesuai kebutuhan.

Kotak block (elemen tingkat block) adalah elemen yang akan memisahkan diri dari kotak garis elemen lain atau membuat baris baru.

Elemen block biasanya menempati ruang horizontal sebanyak mungkin (tergantung pada elemen block).

Elemen level block dapat mengandung elemen level block lainnya, selain elemen inline dan inline-block.

Contoh elemen block yaitu <p>, <ul>, <h1->-<h6>, div>, <section>, dan <header>.

Dengan menggunakan properti display, kamu dapat mengubah format visual (level kotak yang dihasilkan) dari suatu elemen.

CSS Syntax

display: value;

Javascript Syntax

object.style.display="none"

display: none;

Elemen ini sepenuhnya dihapus, seolah-olah tidak ada dalam kode HTML di tempat pertama.

display: inline;

Elemen diubah menjadi elemen inline: berperilaku seperti teks sederhana.

width dan height yang diterapkan tidak akan berpengaruh.

display: block;

Elemen diubah menjadi elemen blok: dimulai pada baris baru, dan mengambil seluruh lebar yang tersedia.

display: inline-block;

Elemen ini membagikan properti elemen inline dan block:

  • inline karena elemen berperilaku seperti teks sederhana, dan menyisipkan dirinya dalam blok teks
  • block karena kamu dapat menerapkan nilai width dan height.

Sebagai contoh, elemen ini memiliki

.element{
  height: 3em;
  width: 60px;
}

display: list-item;

Elemen berperilaku seperti list item: <li>. Satu-satunya perbedaan dengan block yaitu item daftar memiliki bullet point.

display: table;

Elemen berperilaku seperti tabel: <table>.

Konten dan elemen turunannya berperilaku seperti sel tabel

display: table-cell;

Elemen berperilaku seperti sel tabel: <td> atau <th>.

Konten dan elemen turunannya berperilaku seperti sel tabel.

display: table-row;

Elemen berperilaku seperti baris tabel: <tr>.

Konten dan elemen turunannya berperilaku seperti sel tabel.

display: flex;

Elemen diubah menjadi wadah flexbox. Dengan sendirinya, ia berperilaku seperti elemen blok.

Elemen turunannya akan diubah menjadi item flexbox.

display: inline-flex;

Elemen ini membagikan properti elemen inline dan flexbox:

  • inline karena elemen berperilaku seperti teks sederhana, dan menyisipkan dirinya dalam blok teks
  • flexbox karena elemen turunannya akan diubah menjadi item-item flexbox

Sebagai contoh, elemen ini memiliki:

.element{
  height: 3em;
  width: 120px;
}

display: grid;

Elemen diubah menjadi wadah grid. Dengan sendirinya, ia berperilaku seperti elemen blok.

Elemen turunannya akan diubah menjadi grid items.

display: inline-grid;

Elemen ini membagikan properti elemen inline dan grid:

  • inline karena elemen berperilaku seperti teks sederhana, dan menyisipkan dirinya dalam blok teks
  • block karena elemen turunannya akan diubah menjadi item flexbox

Sebagai contoh, elemen ini memiliki:

.element{
  height: 3em;
  width: 120px;
}