Display Inline-Block dan Display-Block

Hallo sobat dumenity berjumpa lagi pada panduan kursuswebdesign, di panduan kali ini saya akan membahas mengenai perbedaan display inline-block dan display block saja. Pada perancangan situs tentu kita tak lepas dari yang namanya property CSS display(inline-block dan block). Apalagi pada perancangan sebuah fitur  yang bernama drop down fitur pasti selalu menggunakan yang namanya property CSS diplay: inline-block dan display:block. Sebenerya masih ada lagi selain dari inline-block dan display block.



Namun penulis di sini hanya akan membahas perbedaan display inline-block dan display block saja. perbedaan keduanya betul-betul sederhana saja kalau inline-block dia akan menjang sesuai dengan content yang berada didalm tag HTML sedangkan block dia akan memenuhi/mengisi seluruh tag HTML.



Mungkin bagi lebih jelasnya saya akan memberikan contohnya seketika. Disini penulis




  • Pertama-tama buka text editor teman – teman. copy paste script dibawah ini.



<p><!DOCTYPE html></p><p><html></p><p><head></p><p>            <title>inline dan block</title></p><p>            (letakkan CSS disini…!!!)</p><p></head></p><p><body></p><p>            <p>admin ialah pragraf inline-block yang mesti berbentuk inline-block bila diatmpilkan di browser</p></p><p>            <h2>admin ialah judul  block yang mesti berbentuk block bila diatmpilkan di browser</h2></p><p></body></p><p></html></p><span id=mce_marker data-mce-type=bookmark data-mce-fragment=1>​</span>



  • Kalau telah save dan buka di browser teman-teman bagus firefox atau chrome.


  • Bagi mengaturnya silahkan copy paste script CSS berikut, dan perhatiakn di script CSS nya. Di tag p saya memberikan property display dengan nilai/value inline-block dan di tag h2 saya memberikan property display dengan nilai block,



<p><style type=text/css></p><p>                 p{</p><p>                             display: inline-block;</p><p>                             background:lightblue;</p><p>                             padding: 10px;</p><p>                            </p><p>                 }</p><p>                 h2{</p><p>                             display: block;</p><p>                             background:lightblue;</p><p>                             padding: 10px;</p><p>                             top: 20px;</p><p>                             left: 20px;</p><p>                 }</p><p>     </style></p><span id=mce_marker data-mce-type=bookmark data-mce-fragment=1>​</span>



  • Kalau telah save dan lihat apa perbedaanya. Inilah hasil setelah teman – teman memberikan display inline-block dan display block di CSS.



Oke seperti itulah sedikit ilmu dari saya semoga bermanfaat untuk teman-teman semuanya.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more