تعیین عناصر از طریق 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 در کنار هم می‌چیند.