Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang perbedaan display inline-block dan display block saja. Dalam pembuatan website tentu kita tidak lepas dari yang namanya property CSS display(inline-block dan block). Apalagi dalam pembuatan sebuah menu yang bernama drop down menu 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 sangat 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 untuk lebih jelasnya saya akan memberikan contohnya langsung. Disini penulis
- Pertama 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>aku adalah pragraf inline-block yang harus berbentuk inline-block jika diatmpilkan di browser</p></p><p> <h2>aku adalah judul block yang harus berbentuk block jika 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 sudah save dan buka pada browser teman-teman baik firefox atau chrome.
- Untuk 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 pada 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 sudah save dan lihat apa perbedaanya. Inilah hasil setelah teman – teman memberikan display inline-block dan display block pada CSS.
Oke itulah sedikit ilmu dari saya semoga bermanfaat bagi teman-teman semuanya.