inline

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

در مثال زیر در جمله اول عناصری که دارای رنگ پس زمینه اند به ترتیب <span> و <em> و هستند و همانطور که مشاهده می کنید باعث شکستن خط نشده اند. و همین رفتار در مورد <img> در وسط جمله دوم دیده می شود:

عناصر inline می توانند margin و/یا padding داشته باشند اما نمی توانند width و height داشته باشند. تعیین عرض و ارتفاع برای اینگونه عناصر اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می دهید عناصر مجاورشان را در راستای افقی هول می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند. در تصویر زیر متن مشخص شده عنصر span است که از همه جهت 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 و بالعکس تبدیل کنید.

علاوه بر block و inline این ویژگی مقادیر دیگری هم می پذیرد که در ادامه شرح داده شده اند:

none

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

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

div {
  display: none;
}

inline-block

همانطور که گفته شد رفتار عنصر را شبیه به رفتار inline می کند با این تفاوت که می توانید به عنصر عرض و ارتفاع بدهید.

در ساخت منوی زیر از این مقدار برای کنار هم قرار دادن عناصر استفاده شده است:

See the Pen display by Mojtaba Seyedi (@seyedi) on CodePen.

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 شبیه سازی کرد.

بیشتر مقادیر لیست شده در زیر معادل تگ های مربوط به جدول در HTML عمل می کنند:

• table: <table>
• table-row-group: <tbody>
• table-column: <col>
• table-column-group: <colgroup>
• table-header-group: <thead>
• table-footer-group: <tfoot>
• table-row: <tr>
• table-cell: <td>
• table-caption: <caption>
• inline-table: این مقدار معادل HTML ندارد. کار آن دقیقا شبیه به مقدار table است با این تفاوت که به جدول رفتار inline می دهد.

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

See the Pen display by Mojtaba Seyedi (@seyedi) on CodePen.

flex

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

inline-flex

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

grid

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

inline-grid

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

ارتباطات بین ویژگی های display و position و float

• اگر display مقدار none داشته باشد عنصر چارچوپی نخواهد داشت و ویژگی های float و position بر روی عنصر تاثیری نخواهند گذاشت.
• در غیر این صورت اگر position مقدار absolute و یا fixed داشته باشد ویژگی float تاثیری بر روی عنصر نخواهد گذاشت و برابر none خواهد بود و مقدار display بر اساس جدول زیر محاسبه می شود.
• در غیر این صورت اگر float مقداری غیر از none داشته باشد عنصر رفتار float خواهد داشت و مقدار display بر اساس جدول زیر محاسبه می شود.
• در غیر اگر عنصر مورد نظر عنصر ریشه (<html>) باشد ویژگی display بر اساس جدول زیر محاسبه می شود.
• اگر هیچ کدام از شرایط بالا را نداشته باشیم. مقدار display همانی خواهد بود که تعیین می کنید.

پشتیبانی مرورگر ها

ویژگی display در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, اپرا, سافاری و اینترنت اکسپلورر و همچنین اندروید و iOS پشتیبانی می شود.

مقدار run-in فقط در مرورگرهای اپرا و سافاری و اینترنت اکسپلورر 8 به بالا پشتیبانی می شود. و همچنین تا نسخه 32 کروم پشتیبانی می شد اما از آن به بعد کروم این ویژگی را پشتیبانی نمی کند.

در جداول زیر پشتیبانی مرورگرها در مورد flex و grid نمایش داده شده است: