CSS — نمایش/قابلیت دید (Display)

آخرین بروزرسانی: 1404/07/15

قبلی: جدول - واکنش گرا (Table Responsive) بعدی: حداکثر عرض (Max-width)

نمایش در CSS (CSS Display & Visibility)

ویژگی «نمایش در CSS (display)» نحوه چیدمان عناصر را کنترل می کند؛ اینکه عنصر به صورت «بلوک (Block)» یا «درون خطی (Inline)» رفتار کند. هر عنصر یک مقدار پیش فرض دارد، اما می توان با display آن را تغییر داد.

ویژگی display در CSS

طبق منبع، display مشخص می کند عنصر چگونه در جریان صفحه نمایش داده شود. مقدارهای رایج شامل inline، block، inline-block، flex، grid، contents و none هستند.

عناصر بلوکی و درون خطی

عنصر بلوکی همیشه از خط جدید شروع می شود و کل عرض موجود را می گیرد؛ در حالی که عنصر درون خطی فقط به اندازه محتوایش فضا اشغال می کند.

تغییر نوع نمایش پیش فرض

می توانید نوع نمایش عناصر را تغییر دهید؛ مثلاً برای ساخت منوی افقی، آیتم های فهرست را درون خطی کنید.

li{ display:inline; }

span{ display:block; }

a{ display:block; }

پنهان سازی: display:none در برابر visibility:hidden

با display:none عنصر کاملاً از جریان سند حذف می شود و فضایی اشغال نمی کند. اما با visibility:hidden عنصر نامرئی می شود ولی همچنان جای خود را نگه می دارد.

h1.hidden{ display:none; }

h1.hidden{ visibility:hidden; }

هشدار: تغییر display فقط شیوه نمایش را عوض می کند، نه نوع معنایی عنصر. بنابراین قوانین محتوا همچنان برقرار است.

مقادیر متداول display

inline و block برای رفتار پایه
inline-block برای عنصر درون خطی با توانایی تعیین width/height
flex و grid برای ظرف های چیدمان پیشرفته
contents برای ناپدیدکردن ظرف و حفظ فرزندان در DOM سطح بالاتر
none برای حذف کامل از جریان صفحه

نکته: برای جدول های عریض، می توانید از الگوی پیمایش افقی استفاده کنید؛ بخش جدول واکنش گرا را ببینید.

مطالعه بیشتر و مسیرهای بعدی

برای تمرین پس از «نمایش در CSS»، سراغ جدول واکنش گرا و استایل دهی جدول بروید. همچنین مقایسه visibility در MDN مفید است.