ویژگی display CSS

تعریف و استفاده

ویژگی display نوع جعبه‌ای که عنصر باید ایجاد کند را مشخص می‌کند.

توضیح

این ویژگی برای تعریف نوع جعبه‌ای که عنصر در هنگام ایجاد طرح ایجاد می‌کند استفاده می‌شود. برای نوع‌های مستند مانند HTML، اگر از display به طور نادرست استفاده شود می‌تواند خطرناک باشد زیرا ممکن است ساختار نمایشی که در HTML تعریف شده است را نقض کند. برای XML، چون XML دارای این ساختار داخلی نیست، استفاده از display ضروری است.

توضیحات:در CSS2 مقدار compact و marker وجود دارد، اما به دلیل فقدان پشتیبانی گسترده، از CSS2.1 حذف شده‌اند.

لطفاً به اینجا نیز مراجعه کنید:

آموزش CSS:محل‌گذاری CSS

دستورالعمل HTML DOM:ویژگی display

مثال

پاراگراف‌ها را به عنوان قاب درون خط نمایش دهید:

p.inline
  {
  display:inline;
  }

آزمایش شخصی کنید

نحوه نوشتن CSS

display: value;

مقدار ویژگی

مقدار توضیح
none این عنصر نمایش داده نمی‌شود.
block این عنصر به عنوان عنصر بلوکی نمایش داده می‌شود و قبل و بعد از آن ترتیب‌بندی‌های خطی وجود دارد.
inline پیش‌فرض. این عنصر به عنوان عنصر درون خط نمایش داده می‌شود و قبل و بعد از آن هیچ ترتیب‌بندی وجود ندارد.
inline-block عنصر درون خط بلوکی. (مقدار新增 شده در CSS2.1)
list-item این عنصر به عنوان لیست نمایش داده می‌شود.
run-in این عنصر بر اساس بافت به عنوان عنصر بلوکی یا عنصر درون خط نمایش داده می‌شود.
compact در CSS مقدار compact وجود دارد، اما به دلیل فقدان پشتیبانی گسترده، از CSS2.1 حذف شده است.
marker در CSS مقادیر marker وجود دارد، اما به دلیل فقدان پشتیبانی گسترده، از CSS2.1 حذف شده است.
table این عنصر به عنوان یک جدول بلوک نمایش داده می‌شود (مثل <table>)، جدول با خطوط تغییر خط نمایش داده می‌شود.
inline-table این عنصر به عنوان یک جدول درون‌خط نمایش داده می‌شود (مثل <table>)، جدول بدون خطوط تغییر خط نمایش داده می‌شود.
table-row-group این عنصر به عنوان یک یا چندین گروه ردیف نمایش داده می‌شود (مثل <tbody>)
table-header-group این عنصر به عنوان یک یا چندین گروه ردیف نمایش داده می‌شود (مثل <thead>)
table-footer-group این عنصر به عنوان یک یا چندین گروه ردیف نمایش داده می‌شود (مثل <tfoot>)
table-row این عنصر به عنوان یک ردیف جدول نمایش داده می‌شود (مثل <tr>)
table-column-group این عنصر به عنوان یک یا چندین گروه ستون نمایش داده می‌شود (مثل <colgroup>)
table-column این عنصر به عنوان یک ستون سلول نمایش داده می‌شود (مثل <col>)
table-cell این عنصر به عنوان یک سلول جدول نمایش داده می‌شود (مثل <td> و <th>)
table-caption این عنصر به عنوان یک عنوان جدول نمایش داده می‌شود (مثل <caption>)
inherit متعهد است که مقادیر ویژگی display از عنصر پدر ارث ببرد.

جزئیات فنی

مقدار پیش‌فرض: inline
erbانی: no
نسخه: CSS1
قوانین جاوااسکریپت: object.style.display="inline"

مثال TIY

چگونه یک عنصر را به عنوان عنصر درون‌خط نمایش می‌دهند
این مثال نشان می‌دهد که چگونه یک عنصر را به عنوان عنصر درون‌خط نمایش می‌دهند.
چگونه یک عنصر را به عنوان عنصر بلوک نمایش می‌دهند
این مثال نشان می‌دهد که چگونه یک عنصر را به عنوان عنصر بلوک نمایش می‌دهند.

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

توضیحات:اگر !DOCTYPE تعیین شده باشد، اینترنت اکسپلورر 8 (و نسخه‌های بالاتر) از مقادیر ویژگی "inline-table"، "run-in"، "table"، "table-caption"، "table-cell"، "table-column"، "table-column-group"، "table-row"، "table-row-group" و "inherit" پشتیبانی می‌کند.