Tutorial CSS Bagian 35 : Cara Menggunakan Property Display di CSS

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial CSS Bagian 34 : Cara Menggunakan Property Border Spacing di CSS. Pada tutorial kali ini, kita akan belajar cara menggunakan property display di CSS.

CSS Display adalah properti CSS yang paling penting yang digunakan untuk mengontrol tata letak elemen. Property ini menentukan bagaimana elemen ditampilkan.

Setiap elemen memiliki nilai tampilan default sesuai dengan sifatnya. Setiap elemen di halaman web adalah kotak persegi panjang dan properti CSS menentukan perilaku kotak persegi panjang tersebut.

CSS Display properti default

default valueinline
inheritedno
animation supportingno
versioncss1
javascript syntaxobject.style.display=”none”

Nilai CSS Display

Ada nilai CSS Display berikut yang umum digunakan.

  1. display: inline;
  2. display: inline-block;
  3. display: block;
  4. display: run-in;
  5. display: none;

1. CSS display inline

Elemen inline mengambil lebar yang diperlukan saja, tidak memaksa jeda baris sehingga aliran teks tidak terputus dan berada dalam satu baris dalam contoh inline.

Elemen inline adalah:

  • <span>
  • <a>
  • <em>
  • <b> dll.

Mari kita lihat contoh CSS display inline.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
  display: inline;   
}  
</style>  
</head>  
<body>  
  <p>Hello Mbahwp.com</p>  
  <p>Java Tutorial.</p>  
  <p>SQL Tutorial.</p>  
  <p>HTML Tutorial.</p>  
  <p>CSS Tutorial.</p>  
</body>  
</html>

Hasil dari kode di atas :

2. CSS display inline-block

Elemen inline-block CSS Display sangat mirip dengan elemen inline tetapi perbedaannya adalah Anda dapat mengatur lebar dan tinggi.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
  display: inline-block;   
}  
</style>  
</head>  
<body>  
  <p>Hello Mbahwp.com</p>  
  <p>Java Tutorial.</p>  
  <p>SQL Tutorial.</p>  
  <p>HTML Tutorial.</p>  
  <p>CSS Tutorial.</p>  
</body>  
</html>

Hasil dari kode ini adalah :

3. CSS Display block

Elemen blok CSS Display membutuhkan ruang horizontal sebanyak mungkin. Berarti elemen blok mengambil lebar penuh yang tersedia. Property ini membuat garis putus sebelum dan sesudah mereka.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
  display: block;   
}  
</style>  
</head>  
<body>  
  <p>Hello Mbahwp.com</p>  
  <p>Java Tutorial.</p>  
  <p>SQL Tutorial.</p>  
  <p>HTML Tutorial.</p>  
  <p>CSS Tutorial.</p>  
</body>  
</html>  

Hasil kode di atas :

4. CSS Display Run-in

Properti ini tidak berfungsi di Mozilla Firefox. Elemen-elemen ini tidak menghasilkan kotak tertentu dengan sendirinya.

  • Jika kotak run-in berisi kotak block, maka fungsinya akan sama dengan block.
  • Jika kotak block mengikuti kotak run-in, kotak run-in menjadi kotak inline pertama dari kotak block.
  • Jika kotak inline mengikuti kotak run-in, kotak run-in menjadi kotak block.
<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
  display: run-in;   
}  
</style>  
</head>  
<body>  
  <p>Hello Mbahwp.com</p>  
  <p>Java Tutorial.</p>  
  <p>SQL Tutorial.</p>  
  <p>HTML Tutorial.</p>  
  <p>CSS Tutorial.</p>  
</body>  
</html>  

Hasil kode di atas :

5. CSS display none

Nilai “none” benar-benar menghapus elemen dari halaman. Nilai ini tidak akan memakan tempat pada layar.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.hidden {  
    display: none;  
}  
</style>  
</head>  
<body>  
  <h1>Judul ini terlihat.</h1>  
  <h1 class="hidden">Yang ini tidak terlihat.</h1>  
  <p>Anda bisa melihat bahwa judul yang di-display : none (hidden) tidak memakan ruang layar.</p>  
</body>  
</html>  

Hasil dari kode di atas :

Nilai CSS Display lainnya

Nilai PropertyDeskripsi
flexIni digunakan untuk display elemen sebagai wadah fleksibel tingkat blok. Ini baru di css3
inline-flexIni digunakan untuk display elemen sebagai wadah fleksibel tingkat inline. Ini baru di css3.
inline-tableDisplay elemen sebagai tabel inline-level.
list-ItemIni membuat elemen berperilaku seperti elemen <li>.
tableIni membuat elemen berperilaku seperti elemen <table>.
table-captionIni membuat elemen berperilaku seperti elemen <caption>.
table-column-groupIni membuat elemen berperilaku seperti elemen <colgroup>.
table-header-groupIni membuat elemen berperilaku seperti elemen <thead>.
table-footer-groupIni membuat elemen berperilaku seperti elemen <tfoot>.
table-row-groupIni membuat elemen berperilaku seperti elemen <tbody>.
table-cellIni membuat elemen berperilaku seperti elemen <td>.
table-rowIni membuat elemen berperilaku seperti elemen <tr>.
table-columnIni membuat elemen berperilaku seperti elemen <col>.

Itu dia tutorial cara menggunakan property display di CSS. Semoga tutorial ini bisa membantu Anda memahami cara menggunakan property display dalam mengatur tampilan website.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0