تاریخ انتشار:۱۳:۲۱ ۱۳۹۹/۵/۱۱

صفت Display

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

---

عناصر block

عناصری که دارای مقدار block برای صفت display هستند، همیشه در یک خط جدید آغاز میشوند و تمام پهنای موجود در آن خط را به خود اختصاص میدهند(تا حد امکان در سمت راست و چپ خود گسترده میشوند). برای مثال عنصر <p> بلاکی را ایجاد میکند که آن را از عناصر بالا و پایین جدا میکند. هیدینگ ها ، تگ های <div>، جداول، لیست ها و آیتم های لیست از دیگر مثال های تگ های سطح block هستند.

  عنصر <div> یک عنصر سطح block است.

مثال هایی از عناصر سطح block :

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

---

عناصر inline

عناصری که دارای مقدار inline برای صفت display هستند، در یک خط جدید آغاز نمیشوند و فقط فضایی به اندازه پهنای مورد نیاز خود اشغال میکنند. آنها با دیگر عناصر در یک خط قرار میگیرند. تگ <strong> یک تگ inline است. کلمه ای که با این تگ فرمت بندی میشود به دنبال دیگر متون در یک خط قرار میگیرد.

این یک  عنصر <span> داخل یک پاراگراف  است .

مثالی از عناصر سطح inline :

• <span>
• <a>
• <img>

---

 تفاوت عناصر inline و block در CSS

در بیشتر موارد ، CSS با عناصر سطح block و سطح inline یکسان رفتار میکند. شما میتوانید فونت ،رنگ و رنگ background را برای هر دو نوع عنصر تنظیم کنید. با این حال وقتی نوبت به صفات margin و padding میرسد ، مرورگر ها کمی متفاوت رفتار میکنند. اگر چه میتوانید با استفاده از صفات راست و چپ margin و  padding فضایی را در طرف های راست و چپ عناصر ایجاد کنید، شما نمیتوانید ارتفاع یک عنصر inline را با استفاده از صفات بالا و پایین margin و padding تغییر دهید.

در صورتی که بخواهیم این کار انجام شود میتوان از مقدار inline-block برای صفت display عنصر مورد نظر استفاده کرد. این مقدار عنصر مورد نظر را تبدیل به عنصری خواهد کرد که هم شبیه عناصر inline و هم شبیه عناصر block است یعنی همانند عناصر inline  فقط فضای مورد نیازش را اشغال میکند و همانند عناصر block میتوان ارتفاع عنصر را با استفاده از صفات بالا و پایین margin و padding تنظیم کرد.

همانطور که در تصویر زیر مشاهده میکنید، padding و margin بالا و پایین بر روی لینک اعمال نمیشود و فقط در حالت سوم که مقدار display به inline-block تغییر داده شده است، این امکان به وجود آمده است :

---

مقدار none برای صفت display

از ;display: none معمولا در زبان جاوا اسکریپت برای پنهان کردن و یا نمایش دادن عناصر بدون حذف و دوباره ایجاد کردن آنها استفاده میشود.

عنصر <script> خود از ;display: none به صورت پیشفرض استفاده میکند.

---

تغییر مقدار پیشفرض برای صفت display

همانطور که گفته شد هر عنصر مقدار پیشفرضی برای صفت display دارد. با این حال شما میتوانید این مقدار پیشفرض را تغییر دهید.

تغییر یک عنصر inline به یک عنصر block و یا بالعکس برای نمایش بهتر صفحات به طریقی خاص که همچنان از استاندارد های وب پیروی میکند، میتواند مفید باشد.

یک مثال رایج برای این کار تبدیل عنصر <li> به یک عنصر inline برای نمایش یک منوی افقی است :

 }  li
 ; display : inline
 {

در نمونه مثال زیر یک عنصر <span> به یک عنصر سطح block تغییر یافته است:

 }  span
 ; display : block
 {

در نمونه مثال زیر یک عنصر <a> به یک عنصر سطح block تغییر یافته است :

 }  a
 ; display : block
 {

---

 پنهان کردن عناصر - display:none یا visibility:hidden

برای پنهان کردن یک عنصرمیتوان مقدار صفت display برای آن عنصر را با مقدار none تنظیم کرد. در این صورت عنصر مورد نظر پنهان میشود :

 }  h1.hidden
 ; display : none
 {

"visibility:hidden" نیز یک عنصر را پنهان میکند. با این حال عنصر مورد نظر همچنان فضایی را که قبل از پنهان شدن دارا بوده است را اشغال میکند :

 }  h1.hidden
 ; visibility : hidden
 {

 

منبع:learnsource