Mungkin anda masih bingung membedakan 2 value ini.
Padahal jika diperhatikan, terdapat perbedaan yang cukup jelas antara display: inline dan display: inline-block.
Silahkan lihat perbandingannya:
1️⃣ Display: inline
property display: inline, pada dasarnya mengikuti arahan dari value left, right, padding, dan margin.
Tapi tidak mempedulikan value top dan bottom.
Property display: inline juga tidak mempedulikan value width dan height.
Jadi, meski anda mengatur width sebesar 200px dan height sebesar 150px pada sebuah elemen, ukuran elemen tersebut tidak akan berubah karena sudah diatur dengan property display: inline.
Anda bisa melihat demo dibawah ini agar lebih mengerti maksud penjelasan diatas.
Contoh penggunaan display inline didalam tag p : Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jika anda melihat teks yang diblok berwarna pink diatas dengan inspect element, anda akan menyadari bahwa saya mengatur elemen span tersebut dengan property display: inline dan padding sebesar 10px serta margin sebesar 5px.
Dan jika anda memperhatikan, margin pada bagian top dan bottom serta width dan height elemen tidak bertambah walau angka nya diubah-ubah. Anda bisa mencobanya sendiri agar semakin percaya.
2️⃣ Display: inline-block
Berbeda sedikit dengan temannya. inline-block mengikuti semua arahan yang diabaikan oleh value inline seperti top, bottom, width, dan height.
Tidak seperti value block, inline-block tidak membuat line-break atau membuat elemen lain turun ke bawah selain elemen inline-block tersebut.
Sesuai namanya, value inline-block adalah gabungan dari value inline dan value block.
Untuk demo penggunaan value inline-block bisa anda lihat dibawah ini :
Contoh penggunaan display inline-block didalam tag p : Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bisa anda lihat diatas, span yang saya atur berwarna pink memiliki height dan width yang berbeda dengan demo sebelumnya.
Hal itu disebabkan karena property display: inline-block tidak mengabaikan value height & width.
Kesimpulan
Perbedaan utama diantara 2 value diatas hanyalah pada arahan yang diikuti atau diabaikan saja.
Kalau value inline mengabaikan arahan dari value width dan height, value inline-block mengikuti ke-dua arahan tersebut.
Kurang lebih seperti itu.
