ویژگی display تعیین می کند که یک عنصر چگونه و چطور نمایش داده شود. هر عنصر HTML یک مقدار پیشفرض برای ویژگی display دارد که بسته به نوع آن عنصر متفاوت است. مقدار پیش فرض ویژگی display برای بیشتر عناصر "block" یا "inline" است. به عبارتی از ویژگی display برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند.
عنصرهای Block-level
یک عنصر Block-levelهمیشه در یک خط جدید شروع می شود و تمام عرض موجود را اشغال می کند. (در حالت پیش فرض کل عرض عنصر نگهدارنده خود را اشغال می کند). اما شما با استفاده از ویژگی display می توانید رفتار پیش فرض یک عنصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و یا بالعکس تبدیل کنید.
مثال هایی از عنصرهای block-level:
- < div >
- < h1 > - < h6 >
- < p >
- < form >
- < header >
- < footer >
- < section >
عنصرهای Inline
یک عنصر Inline در یک خط جدید شروع نمی شود و فقط به اندازه ی نیاز خود فضا را اشغال می کند و همچنین عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار می گیرند.
مثال هایی از عنصرهای inline:
- < span >
- < a >
- < img >
نکته: عناصر inline می توانند margin و یا padding داشته باشند اما نمی توانند width و height داشته باشند. تعیین عرض و ارتفاع برای عناصر inline اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می دهید عناصر مجاورشان را در راستای افقی حرکت می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند.
اما ویژگی Display در CSS علاوه بر مقادیر block و inline این ویژگی مقادیر دیگری هم می پذیرد که در ادامه به توضیح آن ها می پردازیم.
display: none
با استفاده از مقدار none می توانید یک عنصر html را از صفحه حذف کنید. اما توجه داشته باشید که این کار عنصر را از ساختار DOM حذف نمی کند اما اثری از عنصر در صفحه وب باقی نمی ماند و فضایی که گرفته بود آزاد می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن نیز حذف خواهند شد.
از ;display: none معمولا در زبان جاوا اسکریپت برای پنهان کردن و یا نمایش دادن عناصر بدون حذف و دوباره ایجاد کردن آنها استفاده می شود. عنصر < script > خود از ;display: none به صورت پیش فرض استفاده میکند.
یک مثال متداول درست کردن عنصرهای < li > برای منوهای افقی می باشد:
خروجی مثال بالا به شکل زیر است:
مثال زیر عنصرهای < span > را بعنوان عنصرهای بلاک نشان می دهد.
خروجی مثال بالا به شکل زیر است:
مثال زیر عنصرهای < a > را به عنوان عنصرهای بلاک نشان می دهد:
خروجی مثال بالا به شکل زیر است:
پنهان کردن یک عنصر
display :none یا visibility :hidden ؟
پنهان کردن یک عنصر می تواند با تنظیم کردن ویژگی display روی none انجام شود. در این حالت عنصر در صفحه نمایش داده نمی شود.
در خروجی مثال بالا همانطور که می بینید تگ h1 نمایش داده نشده است.
;visibility:hidden نیز عنصر html را پنهان می کند، اما در این حالت، عنصر فضای خود را همچنان اشغال می کند. عنصر پنهان خواهد شد، اما فضای اشغال شده را آزاد نمی کند.
خروجی مثال بالا به شکل زیر است. همانطور که می بینید تگ h1 مخفی شده است اما همچنان فضای خود را در صفحه حفظ کرده است.
