جواب سوال درباره ی inline-block

تعیین عناصر از طریق Inline:

اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت. <span>, <em> و <img> مثال هایی از این نوع هستند.

عناصر inline می توانند margin و/یا padding داشته باشند اما نمی توانند width و height داشته باشند. تعیین عرض و ارتفاع برای اینگونه عناصر اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می دهید عناصر مجاورشان را در راستای افقی هول می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند. 

واقعیت این است که عناصر inline هم می توانند عرض و ارتفاع بگیرند اما باید از طریق ویژگی display به نوع inline-block تبدیل شوند.

inline-block :

هم شبیه به inline است با این تفاوت که مقادیر عرض و ارتفاع اندازه آن را تغییر خواهند داد و همینطور margin و padding آنها بر روی عناصر مجاور آنها در هر دو راستای عمودی و افقی تاثیر خواهد گذاشت.

block:

در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند (یعنی در حالت پیشفرض کل فضایی که عنصر نگهدارنده آن داشته باشد را اشغال می کند یا به معنای دیگر عرض بیشینه خواهد داشت). عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.

عناصری مثل <section> , <article> , <div> , <h6>...<h1> , <ul> , <p> از نوع block هستند. در مثال های بالا قسمت های سیاه رنگ در واقع یک عنصر پاراگراف هستند که عنصرهای داخلی را پوشش داده اند.

با استفاده از ویژگی display شما می توانید رفتار پیشفرض عناصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و بالعکس تبدیل کنید.

none:

با استفاده از این مقدار می توانید یک عنصر را از صفحه حذف کنید. اما توجه داشته باشید که این کار عنصر را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نمی ماند و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد.

نکته مهم اینکه وقتی عنصری را با این روش حذف کنید ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت.

list-item:

باعث می شود تا رفتار عنصر شبیه به رفتار آیتم های یک لیست بشود. معادل آن در HTML عنصر <li> می باشد.

run-in:

این مقدار وابسته به نوع عناصر داخل آن و بعد از آن رفتار متفاوت از خود نشان می دهد. همچنین در مرورگرهای اصلی به درستی بطور کامل پشتیبانی نمی شود ( به پایین صفحه مراجعه کنید).

• اگر عنصری از نوع run-in دارای فرزندی از نوع block باشد عنصر run-in شبیه به block رفتار می کند.
• اگر یک عنصر block دقیقا بعد از عنصری از نوع run-in بیاید. عنصر run-in رفتار inline از خود نشان می دهد و کنار عنصر block در یک خط قرار می گیرد.
• اگر یک عنصر inline دقیقا بعد از عنصری از نوع run-in بیاید, عنصر run-in رفتار block به خود خواهد گرفت.

table:

با استفاده از مقادیر زیر می توان جدول و عناصر آن را در CSS شبیه سازی کرد.

flex:

رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.

inline-flex:

رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.

grid:

رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.

inline-grid:

رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.