تفاوت بین inline و inline-block

در پست امروز میخوام تفاوت بین ویژگی های inline, Inline-block و block را توضیح بدم.

خاصیت block را باید برای عناصری که inline هستند مثل تگ span, تگ a تعریف میشود. 

خاصیت inline برای عنصری که تعریف میشود از margin و padding در جهت topو bottomو height و width پشتیبانی نمی کند. 

در طراحی سایت قسمت هایی که نیاز است تگ های خاصییت inline یک ردیف را کامل پوشش دهد کاربرد دارد.

خاصیتinline-block برای عناصری که خاصیت block دارند میتواند تعریف شود وقتی هم این خاصیت تعریف شود تگ موردنظر از خاصیت width، height ، margin و padding در 4 جهت پشتیبانی می کند.

برای مثال داخل یه تگ div از تگ h1 استفاده کردید وقتی h1 خاصیت inline داشته باشه تگ div دیگر طول و عرض h1( با توجه به سایز ) رو نخواهد گرفت و بعد از تگ h1 هر عنصری تعریف شود(span)   به دلیل اینکه div طول و عرضی ندارد ظاهر نامرتبی div خواهد گرفت و اگر به div استایل داده باشید برای مثال( box-shadow) این خاصیت به عناصری که داخل div تعریف شده (h1, span ) داده میشه.