Perbedaan antara inline dan inline-block

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