display

از ویژگی display برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند.

در CSS دو نوع چارچوب اصلی وجود دارند: inline و block.

 

inline

اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت. <span>, <em> و <img> مثال هایی از این نوع هستند.

در مثال زیر در جمله اول عناصری که دارای رنگ پس زمینه اند به ترتیب <span> و <em> و هستند و همانطور که مشاهده می کنید باعث شکستن خط نشده اند. و همین رفتار در مورد <img> در وسط جمله دوم دیده می شود:

 
عنصر inline در css
 

عناصر inline می توانند margin و/یا padding داشته باشند اما نمی توانند width و height داشته باشند. تعیین عرض و ارتفاع برای اینگونه عناصر اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می دهید عناصر مجاورشان را در راستای افقی هول می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند. در تصویر زیر متن مشخص شده عنصر span است که از همه جهت padding و margin گرفته است:

 
عنصر داخلی در css
 

واقعیت این است که عناصر inline هم می توانند عرض و ارتفاع بگیرند اما باید از طریق ویژگی display به نوع inline-block تبدیل شوند.

inline-block هم شبیه به inline است با این تفاوت که مقادیر عرض و ارتفاع اندازه آن را تغییر خواهند داد و همینطور margin و padding آنها بر روی عناصر مجاور آنها در هر دو راستای عمودی و افقی تاثیر خواهد گذاشت.

 
inline-block در css
 

 

block

در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند (یعنی در حالت پیشفرض کل فضایی که عنصر نگهدارنده آن داشته باشد را اشغال می کند یا به معنای دیگر عرض بیشینه خواهد داشت). عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.

عناصری مثل <section> , <article> , <div> , <h6>...<h1> , <ul> , <p> از نوع block هستند. در مثال های بالا قسمت های سیاه رنگ در واقع یک عنصر پاراگراف هستند که عنصرهای داخلی را پوشش داده اند.

با استفاده از ویژگی display شما می توانید رفتار پیشفرض عناصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و بالعکس تبدیل کنید.

علاوه بر block و inline این ویژگی مقادیر دیگری هم می پذیرد که در ادامه شرح داده شده اند:

 

none

با استفاده از این مقدار می توانید یک عنصر را از صفحه حذف کنید. اما توجه داشته باشید که این کار عنصر را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نمی ماند و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد.

نکته مهم اینکه وقتی عنصری را با این روش حذف کنید ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت.
 


div {
  display: none;
}

 

inline-block

همانطور که گفته شد رفتار عنصر را شبیه به رفتار inline می کند با این تفاوت که می توانید به عنصر عرض و ارتفاع بدهید.

در ساخت منوی زیر از این مقدار برای کنار هم قرار دادن عناصر استفاده شده است:

 

See the Pen display by Mojtaba Seyedi (@seyedi) on CodePen.


 

list-item

باعث می شود تا رفتار عنصر شبیه به رفتار آیتم های یک لیست بشود. معادل آن در HTML عنصر <li> می باشد.

run-in

این مقدار وابسته به نوع عناصر داخل آن و بعد از آن رفتار متفاوت از خود نشان می دهد. همچنین در مرورگرهای اصلی به درستی بطور کامل پشتیبانی نمی شود ( به پایین صفحه مراجعه کنید).

  • اگر عنصری از نوع run-in دارای فرزندی از نوع block باشد عنصر run-in شبیه به block رفتار می کند.
  • اگر یک عنصر block دقیقا بعد از عنصری از نوع run-in بیاید. عنصر run-in رفتار inline از خود نشان می دهد و کنار عنصر block در یک خط قرار می گیرد.
  • اگر یک عنصر inline دقیقا بعد از عنصری از نوع run-in بیاید, عنصر run-in رفتار block به خود خواهد گرفت.

 

table

با استفاده از مقادیر زیر می توان جدول و عناصر آن را در CSS شبیه سازی کرد.

بیشتر مقادیر لیست شده در زیر معادل تگ های مربوط به جدول در HTML عمل می کنند:

  • table: <table>
  • table-row-group: <tbody>
  • table-column: <col>
  • table-column-group: <colgroup>
  • table-header-group: <thead>
  • table-footer-group: <tfoot>
  • table-row: <tr>
  • table-cell: <td>
  • table-caption: <caption>
  • inline-table: این مقدار معادل HTML ندارد. کار آن دقیقا شبیه به مقدار table است با این تفاوت که به جدول رفتار inline می دهد.

دموی زیر یک تکنیک را برای تراز کردن عناصر با استفاده از رفتارهای جدول و عناصر آن نشان می دهد:

 

See the Pen display by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

flex

رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.

 

inline-flex

رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.

 

grid

رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.

 

inline-grid

رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.

 

ارتباطات بین ویژگی های display و position و float

 

  • اگر display مقدار none داشته باشد عنصر چارچوپی نخواهد داشت و ویژگی های float و position بر روی عنصر تاثیری نخواهند گذاشت.
  • در غیر این صورت اگر position مقدار absolute و یا fixed داشته باشد ویژگی float تاثیری بر روی عنصر نخواهد گذاشت و برابر none خواهد بود و مقدار display بر اساس جدول زیر محاسبه می شود.
  • در غیر این صورت اگر float مقداری غیر از none داشته باشد عنصر رفتار float خواهد داشت و مقدار display بر اساس جدول زیر محاسبه می شود.
  • در غیر اگر عنصر مورد نظر عنصر ریشه (<html>) باشد ویژگی display بر اساس جدول زیر محاسبه می شود.
  • اگر هیچ کدام از شرایط بالا را نداشته باشیم. مقدار display همانی خواهد بود که تعیین می کنید.

مقداری که شما تعیین می کنید مقداری که مرورگر جایگزین آن می کند
inline-table table
inline, table-row-group, table-column, table-column-group,
table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block 		block
مقادیر دیگر برار با مقداری که تعیین شده است

 

پشتیبانی مرورگر ها

ویژگی display در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, اپرا, سافاری و اینترنت اکسپلورر و همچنین اندروید و iOS پشتیبانی می شود.

مقدار run-in فقط در مرورگرهای اپرا و سافاری و اینترنت اکسپلورر 8 به بالا پشتیبانی می شود. و همچنین تا نسخه 32 کروم پشتیبانی می شد اما از آن به بعد کروم این ویژگی را پشتیبانی نمی کند.

در جداول زیر پشتیبانی مرورگرها در مورد flex و grid نمایش داده شده است:


 

مطالب مرتبط

30 دیدگاه برای “display”

  6. مثل همیشه عالی
    درسایی که با بازی کردن یاد میگیریم خیلی عالین! هر قسمتی که احساس میکنید امکانش هست با بازی آموزش بدید.
    بازم ممنون!

    پاسخ

  9. با سلام و تشکر از شما بابت این مبحث آموزشی

    فقط اینکه مبحث ِ “ارتباطات بین ویژگی های display و position و float” گویا نبود، شروط درست نوشته نشده بودند، نمیشد درست تفکیک کردش از هم. همینطور جدول زیرش.
    میشد حالت های مختلف رو بهتر نمایش داد و از “در غیر اینصورت” استفاده نکرد.

    پاسخ

  12. جالب بود واقعا فکر نمی کردم display:none باعث پنهان کردن عنصر از دید رباتها بشه با این حساب الان میفهمم که چرا بوت استرپ کلاس sr-only یش ماجراش فرق میکنه! ممنون :)

    پاسخ

  14. سلام خواهش میکنم کمکم کنید من یه سوال دارم در رابطه با عناصر اینلاین،

    راستش گفتین که عناصر اینلاین نمیتونه margin , padding , border , width , height بگیره مگر اینکه display اون رو تغییر بدیم!

    ولی من وقتی یک عکس میزارم تو صفحه بین یک پاراگراف ، اولا که هم در حالت عکودی روی پاراگراف ها تاثیر میزاره و اونارو هول میده و هم در حالت افقی ، و دما این که هم میتونم بهش margin , padding , border , width , height بدم با اینکه display رو گزاشتم رو حالت اینلاین

    پاسخ

    1. سلام، اول که تحریف نکنید :) من حرفی از border نزدم. دوما که من نگفتم نمیتونن padding و margin بگیرند، نکته ای دیگه رو در موردشون گفتم که میتونید بخونید.

      سوما اینکه حرفتون در مورد img درسته که من اینجا چون کمی پیجیده بود نیاوردم این قضیه رو. عنصر img از نوع عناصر خطی است اما همچنین از نوع عناصر Replaced است که استثنا هستش. این نوع عناصر تحت تاثیر محتوایی داخلشون میاد قرار میگیرند. مثلا عنصر تصویر با اینکه خطی هستش نباید ابعاد بگیره که در نتیجه نباید از سمت عمودی بشه بهش مارجین داد اما چون محتواش (یعنی همون عکس) میاد جاش میشینه، اون عکس نسبت و ابعاد ذاتی خودش را بر عنصر img تحمیل میکنه که باعث میشه رفتار img متفاوت باشه.

      در کل بهتره اکثر مواقع display این عنصر به block تبدیل کنیم که کنترل بهتری روش داشته باشیم.

      پاسخ

  16. سلام متوجه نشدم
    “عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.”
    میشه اینو ساده تر بگید یعنی چی

    پاسخ

    1. سلام ، یعنی یه عنصر بلاک میتونه نگهدارنده عناصر بلاک و اینلاین باشه ولی عنصر اینلاین این قابلیت رو نداره

      پاسخ

  18. سلام وقت بخیر
    خیلی ممنونم بابت مقاله ی کاربردی و درجه یکتون .
    خیلی ممنونتون میشم به سوالم جواب بدید ؛
    همینطور که گفتید ” عناصری که display: none; داشته باشن برای ربات ها قابل خوندن نیستن .”
    حالا اگه اگه تو حالت hover تعریف کنیم display:none باز هم توسط رباط ها خونده میشن یا نه ؟؟!
    یا برعکس ؛ حالت اصلی تگ display:none باشه ولی حالت هاورش نمایش داده بشه چطور ؟؟!

    پاسخ

  19. با سلام
    اگر ممکنه منو راهنمایی کنید که کدام قسمت از کد زیر را تغییر بدم تا دکمه دانلود با نوشته کنار آن در یک خط قرار بگیرد ، البته من تخصصم شیمی هستش ولی یه مقدار وقت روی این استایل گذاشتم و البته موفق نشدم .
    این آدرس سایت و شکل قالب دانلود : http://www.kanoonshimigorgan.com/%d8%a2%d8%b2%d9%85%d9%88%d9%86-%d9%87%d8%a7%db%8c-%d8%a2%d8%b2%d9%85%d8%a7%db%8c%d8%b4%db%8c-%d9%82%d9%84%d9%85-%da%86%db%8c

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *