Photo by Nick Karvounis on Unsplash

Hallo guys, ketemu lagi kita dalam pembelajaran CSS. materi kali ini adalah materi dasar mengenai perbedaan property display : inline-block, dengan display:inline. langsung saja, simak penjelasan dibawah ini :

1. inline elemen tidak memiliki pengaturan properti width (lebar) dan height (tinggi). dia akan selalu otomatis mengikuti content yang kita isi didalamnya. sehingga meskipun kita set width dan heightnya pada elemen ini. itu tidak akan berpengaruh, sedangkan inline-block bisa kita set sesuka hati.
2. inline elemen tidak memiliki pengaturan untuk properti margin dan padding (hanya atas dan bawah saja), sehingga jika kita memberikan margin-top atau margin-bottom pada elemen tersebut, itu tidak akan berpengaruh sama sekali. sedangkan inline-block bisa.
3. baik inline maupun inline block, tidak membuat garis baru dan menjadikan elemen ini bersebelahan dengan elemen sebelumnya.

untuk memahami lebih detail mengenai perbedaan inline dan inline-block, mari kita lihat contoh dibawah ini.

silakan rubah property display pada kedua CSS diatas dengan inline dan inline-block, lalu simpulkan sendiri jawabannya yah. kalo ada pertanyaan silakan tulis di kolom komentar ^_^

Thanks

Photo by Jackson Sophat on Unsplash

Tag HMTL pada dasarnya, sebelum kita melakukan modifiksi pada CSS memiliki pengaturan secara default (pengaturan bawaan) tergantung dari jenis tag yang kita gunakan. diantaranya ada yang bertipe block dan ada yang bertipe inline. untuk memahami perbedaan dari kedua tipe tersebut, simak penjelasan dibawah ini.

1. Block Element

Block element selalu di mulai dengan baris baru/alinea baru, dan mengambil space melebar  secara keseluruhan mengikuti space yang kita berikan pada tag induknya. sehingga, jika kita membuat beberapa elemen yang bertipe ini, elemen akan saling bertumpuk (tidak bersebelahan). ini merupakan karakter dari block elemen.

Contoh dari block element:

• <div>
• <h1> – <h6>
• <p>
• <form>
• <table>
• <tr>
• <p>
• <header>
• <article>
• dll

2. Inline Elemen

Inline Elemen kebalikan dari Block Elemen, elemen ini tidak dimulai dengan baris baru dan hanya mengambil space sesuai dengan isi konten yang kita tulis. contohnya jika kita menulis “nama saya budi”, maka lebar yang diambil oleh elemen ini berkisar selebar 14 huruf tersebut. sehingga, jika kita membuat beberapa elemen dengan tipe inline, maka elemen tersebut akang saling bersebelahan.

“ini contoh penggunaan inline elemen dengan formatting text”

Beberapa contoh Inline Elemen :

• <span>
• <a>
• <img>
• <u>, <i> , <b>, <strong>, <em>
• dll

Berikut penjelasan singkat mengenai kedua blok diatas, mudah-mudahan sedikit banyak memberikan gambaran mengenai Block dan Inline Elemen. Ok, Bagaimana kawan-kawan sudah nambah pemahamannya?

Dulu, waktu saya pertama kali mengetahui hal ini, langsung saya coba untuk melakukan perubahan di property display pada CSS. namun ternyata pilihan untuk display tidak hanya inline dan block saja, melainkan banyak sekali. anda bisa membacanya lebih lengkap disini.
yang akan saya jelaskan disini adalah perbedaan antara inline dan inline-block dan kapan kita menggunakannya. silakan kunjungi artikel ini :

Perbedaan antara inline dan inline-block