صفت display در CSS

صفت display مهمترین صفت زبان CSS برای چگونه نمایش دادن یک عنصر در HTML است. اگرچه مرورگر ها با هر عنصر در زبان HTML همانند یک باکس رفتار میکنند، تمام باکس ها شبیه هم نیستند. CSS دارای دو نوع باکس متفاوت است. باکس های block و باکس های inline که به ترتیب مربوط به دو نوع عنصر موجود در زبان HTML هستند :

عناصر سطح block و عناصر سطح inline.


صفت Display 

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

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 تغییر داده شده است، این امکان به وجود آمده است :

Display_inline


مقدار 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;
}
خودتان امتحان کنید

 

منتشر شده در ۱۸ شهریور ۱۳۹۶ حمید رضا ملکی ۱۶۲۱ بازدید
دیدگاه ها
mansoore سه شنبه ۱۹ تیر ۱۳۹۷

سلام ببخشید بقیه مقداراشو میشه توضیح بدید مثل table

حمید رضا ملکی سه شنبه ۱۹ تیر ۱۳۹۷
سلام. خاصیت display دارای مقادیر زیادی است که پر کاربرد ترین آنها در این مقاله توضیح داده شده است و مقادیر دیگر کمتر استفاده میشود. با این حال سعی میکنیم توضیحاتی در مورد آنها در همین مقاله برای شما قرار بدیم.

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید