CSS display property

Dari nilai-nilai yang digunakan pada css display property, mungkin yang sedikit agak membingungkan adalah membedakan antara nilai "inline" dan "inline-block", terlebih ketika nilai "properti display" ini diterapkan dalam elemen berbeda. Melalui "tutorial dasar css" atau "tutorial basic css" dalam "Belajar Kode CSS & Design Blog" ini diharapkan bisa sedikit membantu untuk lebih memahami "display property" dan penggunaannya sehingga pemanfaatan kode sekaligus penataan desain blog dan posting dapat lebih optimal. Demo online yang digunakan (di halaman terbawah) diharapkan juga mampu menciptakan pemahaman yang lebih baik dan lebih cepat dengan mencoba melakukan berberapa test kode css dan html, termasuk didalamnya tentang css display property yang lain seperti misalnya "display:table", "display:table-row", "display:none", "display:run-in" atau "display:block".

Value CSS Display Property

• inherit dituliskan dalam bentuk display:inherit
• inline dituliskan dalam bentuk display:inline
• block dituliskan dalam bentuk display:block
• inline-block dituliskan dalam bentuk display:inline-block
• none dituliskan dalam bentuk display:none
• list-item dituliskan dalam bentuk display:list-item
• run-in dituliskan dalam bentuk display:run-in
• table dituliskan dalam bentuk display:table

display:inherit

Ketika nilai inherit digunakan maka elemen akan bekerja sesuai dengan "nilai display property yang digunakan pada elemen induknya".

Contoh :

<style type="text/css">
div{
      display:inline-block; 
      padding:10px;
      border:1px solid #888;
      margin:10px;
}
h3{
      display:inherit;      
      color:red;
      background:#ccc;
}
img{
      display:inherit; 
      margin:10px; 
      padding:4px;
      border:1px solid #888;
}
</style>

<div>
text here ... dst 
<h3>Text here</h3>
<img src="image.jpg" width="50" height="50" />
text here ... dst 
</div>

Keterangan :

Karena div menggunakan nilai "inline-block", maka ketika elemen yang berada dalam tag DIV menggunakan "display:inherit", secara otomatis elemen-elemen yang di dalam tag DIV tersebut akan mengikuti nilai css property display yang digunakan DIV (dalam contoh di atas = display:inline-block).

display:inline

Nilai "inline" mendefinisikan sebuah elemen akan ditampilkan "inline" atau dalam baris yang sama dengan elemen yang lain.

Contoh :

<style type="text/css">
div{
      padding:10px;
      border:1px solid #888;
      margin:10px;
}
h4{
      display:inline;
      font-size:16px;      
      color:red;
      background:#ccc;
}
</style>

<div>
Belajar css membuat kita lebih mengetahui bagaimana sebuah blog dibentuk dan bagaimana menggunakan kode secara efektif. Mengetahui fungsi setiap elemen dalam <h4>kode HTML</h4> juga akan mendorong kita untuk menata tampilan blog dengan lebih baik.
</div>

display:block

Elemen ditampilkan dalam bentuk block yang tidak menyisakan ruang bagi elemen lain baik di sebelah kanan atau sebelah kirinya sehingga elemen lain akan selalu berada di atas atau di bawahnya, kecuali ditambahkan pengaturan "float property".

Contoh :

<style type="text/css">
div{
      padding:10px;
      border:1px solid #888;
      margin:10px;
}
h4{
      display:block;
      font-size:16px;      
      color:red;
      background:#ccc;
}
</style>

<div>
Belajar css membuat kita lebih mengetahui bagaimana sebuah blog dibentuk dan bagaimana menggunakan kode secara efektif. Mengetahui fungsi setiap elemen dalam <h4>kode HTML</h4> juga akan mendorong kita untuk menata tampilan blog dengan lebih baik.
</div>

display:inline-block

perpaduan antara "display:block" dan "display:inline".

<style type="text/css">
div{
      padding:10px;
      border:1px solid #888;
      margin:10px;
}
h4{
      display:inline-block;
      font-size:16px;      
      color:red;
      background:#ccc;
}
</style>

<div>
Belajar css membuat kita lebih mengetahui bagaimana sebuah blog dibentuk dan bagaimana menggunakan kode secara efektif. Mengetahui fungsi setiap elemen dalam <h4>kode HTML</h4> juga akan mendorong kita untuk menata tampilan blog dengan lebih baik.
</div>

display:none

Display "none" biasanya digunakan untuk meniadakan elemen tertentu dengan berbagai tujuan. Dengan nilai ini maka elemen tidak akan ditampilkan di halaman web/blog. Jika anda mempunyai blog di blogger, "display:none" akan erat kaitanya dengan upaya menghilangkan tampilan "iframe pada navbar" yang terletak di atas header. Banyak blogger menyembunyikan navbar ini dengan menggunakan kode/syntax ".navbar{display:none;}".

display:list-item

Elemen ditampilkan dengan penanda di depan setiap elemen seperti halnya pada CSS listing (ol, ul dan li). Dibuat untuk membentuk sebuah daftar.

Contoh :

<style type="text/css">
div.mybox{  
      padding:10px 20px;
      border:1px solid #888;
      margin:10px;
}
div.daftar{
     display:list-item;
     font:normal 14px Arial;
     line-height:20px;
}
</style>

<div class="mybox">
<div class="daftar">Nomor 1</div>
<div class="daftar">Nomor 2</div>
<div class="daftar">Nomor 3</div>
<div class="daftar">Nomor 4</div>
</div>

display:table

Elemen akan ditampilkan dalam bentuk tabel.

Contoh:

<style type="text/css">
.table{
     display:table;
     border-collapse: collapse; 
}
.table-row{
     display:table-row;   
}
.table-cell{
     display:table-cell;
     border:2px outset blue;
     padding:2px 8px;
}
</style>


<div class="table">
    <div class="table-row">
        <div class="table-cell">Nmr/Keterangan</div>
        <div class="table-cell">Nama Barang</div>
        <div class="table-cell">Harga</div>
    </div>
    <div class="table-row">
        <div class="table-cell">01</div>
        <div class="table-cell">Daging Sapi</div>
        <div class="table-cell">Rp. 48.000,-</div>
    </div>
    <div class="table-row">
        <div class="table-cell">02</div>
        <div class="table-cell">Telor Ayam</div>
        <div class="table-cell">Rp. 14.000,-</div>
    </div>
</div>

display:run-in

Dalam beberapa hal display run-in hampir sama dengan display block.

Dibawah ini telah disertakan demo tentang css display property. Anda dapat mencoba beberapa kode css berikut xHTML dari berbagai nilai display property yang ada di atas. Lakukan juga beberapa percobaan dengan menambahkan property lain hingga mendapatkan hasil test atau percobaan yang lebih detail dan lengkap.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html> <html> <title>html tag h1 s/d h6</title> <head> <style type="text/css"> img{ margin:10px; padding:4px; border:1px solid #888; } div{ padding:10px; border:1px solid #888; margin:10px; } h3{ color:red; background:#ccc; } .inline{ display:inline; } .inline_block{ display:inline-block; } .block{ display:block; } </style> </head> <body> <div>Membedakan "display:block" dengan yang lain memang cukup mudah, namun untuk membedakan "display:inline" dan "display:inline-block" kadang terasa cukup sulit. Perbedaan yang begitu tipis diamtara keduanya membuat kita harus berhati-hati saat memilih dan menerapkan di desain blog/web. <h3 class="inline">display:inline</h3> tag h3 yang mempunyai karakter khusus coba kita gunakan sebagai contoh perbedaan penggunaan nilai "inline, inline-block dan block" melalui property "display" pada elemen h3.</div> <div>Tidak begitu mudah memang menerapkan css property "display" dalam kenyataan, namun demikian contoh di bawah ini mungkin bisa menjadi sebuah gambaran yang menunjukkan perbedaan nyata antara "display:inline", "display:inline-block", dan "display:block" <h3 class="inline_block">display:inline-block</h3> tag h3 yang mempunyai karakter khusus coba kita gunakan sebagai contoh perbedaan penggunaan nilai "inline, inline-block dan block" melalui property "display" pada elemen h3.</div> <div>Tidak begitu mudah memang menerapkan css property "display" dalam kenyataan, namun demikian contoh di bawah ini mungkin bisa menjadi sebuah gambaran yang menunjukkan perbedaan nyata antara "display:inline", "display:inline-block", dan "display:block" <h3 class="block">display:block</h3> tag h3 yang mempunyai karakter khusus coba kita gunakan sebagai contoh perbedaan penggunaan nilai "inline, inline-block dan block" melalui property "display" pada elemen h3.</div> </body> </html>

Post : CSS display property
by : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot