ویژگی Display در CSS

در این بخش از آموزش طراحی سایت به آموزش ویژگی Display در CSS می پردازیم.

ویژگی Display در CSS

 ویژگی display تعیین می کند که یک عنصر چگونه و چطور نمایش داده شود. هر عنصر HTML یک مقدار پیشفرض برای ویژگی display دارد که بسته به نوع آن عنصر متفاوت است. مقدار پیش فرض ویژگی display برای بیشتر عناصر "block" یا "inline"  است. به عبارتی از ویژگی display برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند.


عنصرهای Block-level

یک عنصر Block-levelهمیشه در یک خط جدید شروع می شود و تمام عرض موجود را اشغال می کند. (در حالت پیش فرض کل عرض عنصر نگهدارنده خود را اشغال می کند). اما شما با استفاده از ویژگی display می توانید رفتار پیش فرض یک عنصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و یا بالعکس تبدیل کنید.

آموزش css

مثال هایی از عنصرهای 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 > برای منوهای افقی می باشد:

آموزش css

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

مثال زیر عنصرهای < span > را بعنوان عنصرهای بلاک نشان می دهد.

آموزش ویژگی display در css

خروجی مثال بالا به شکل زیر است:

آموزش خاصیت display در css

مثال زیر عنصرهای < a > را به عنوان عنصرهای بلاک نشان می دهد:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت


پنهان کردن یک عنصر

display :none  یا  visibility :hidden ؟

پنهان کردن یک عنصر می تواند با تنظیم کردن ویژگی display روی none انجام شود. در این حالت عنصر در صفحه نمایش داده نمی شود.

آموزش ویژگی display در css

در خروجی مثال بالا همانطور که می بینید تگ h1 نمایش داده نشده است.

آموزش css

;visibility:hidden نیز عنصر html را پنهان می کند، اما در این حالت، عنصر فضای خود را همچنان اشغال می کند. عنصر پنهان خواهد شد، اما فضای اشغال شده را آزاد نمی کند.

آموزش خاصیت display در css

خروجی مثال بالا به شکل زیر است. همانطور که می بینید تگ h1 مخفی شده است اما همچنان فضای خود را در صفحه حفظ کرده است.

آموزش طراحی سایت

آموزش طراحی سایت آموزش ویژگی display آموزش display در css آموزش خاصیت display در css آموزش css