ویژگی display در CSS

ویژگی نمایش (display)، نحوه چیدمان و لایه بندی المان ها را مشخص می کند.

مهم ترین مقادیر ویژگی display شامل:

• block: به اندازه ی یک بلوک (ابتدا تا انتهای عرض ممکن) فضا می گیرد.
• inline: به مقدار مورد نیاز (مقدار محتوا) فضا می گیرد.
• none: المان را پنهان می کند.
• inline-block: ترکیبی از inline و block.
• flex: نوع نمایش انعطاف پذیر

نکته: هر تگ در CSS، دارای مقادیر پیش فرض display است. 

نکته: هر مقدار display به حالتی خاص، المان ها را در کنار هم می چیند که نوع نمایش آن ها را تحت تاثیر می گذارد.

المان هایی که از نوع نمایش block استفاده می کنند:

• همیشه از سطر جدید شروع می شوند.
• کل سطر را اشغال می کنند. (حتی اگر نیاز نداشته باشند.)
• ویژگی margin-top و margin-bottom را می پذیرند.
• ویژگی padding-top و padding-bottom را به صورت طبیعی اعمال می کنند.
• ویژگی width و height را می پذیرند.

این المان دارای display: block است. همانطور که مشاهده می کنید، حاشیه ی آن تا انتهای سطر اشغال شده است.

نکته: در CSS، یک بلوک، شامل ابتدا تا انتهای عرض ممکن است.

<div>این تگ div است</div>
<p>این تگ p است</p>

نکته: همانطور که در نمونه کد بالا دیدید، با این که این دو تگ نوشته ی کوتاهی داشتند و نیازی به اشغال کل خط (بلوک) نداشتند، ولی تا انتهای بلوک را اشغال کردند. این از جمله خاصیت های block است.

نکته: تگ هایی مانند div ،p ،form و ... به صورت پیش فرض، block هستند.

المان هایی که از نوع نمایش inline استفاده می کنند:

• بر خلاف المان block، از خط جدید شروع نمی شوند.
• بر خلاف المان block، به اندازه ی لازم، فضا اشغال می کنند.
• بر خلاف المان block، نمی توان از ویژگی margin -top و margin-bottom استفاده کرد.
• بر خلاف المان block، ویژگی padding-top و padding-bottom را به صورت ناقص اعمال می کند.
• بر خلاف المان block، قابلیت مقداردهی ویژگی width و height وجود ندارد.

این متن صرفا برای تست است.

نکته: اگر به المان بالا توجه کنید، متوجه می شوید که padding اجرا شده ولی باعث ایجاد همپوشانی، روی المان های دیگر شده است.

<i>این تگ i است</i>
<b>این تگ b است</b>

نکته: همانطور که در نمونه کد بالا دیدید، برخلاف block، در inline به مقدار مورد نیاز (اندازه متن) فضا اشغال می شود.

نکته: تگ هایی مانند span ،i ،img و ... به صورت پیش فرض inline هستند.

نکته:  با این که هر تگ به صورت پیش فرض دارای display مخصوص خود است، ولی می توان با استفاده از ویژگی display، مقدار پیش فرض آن تگ را بازنویسی کرد.

<div style="display: inline;">این تگ div است</div>
<p style="display: inline;">این تگ p است</p>

<i style="display: block;">این تگ i است</i>
<b style="display: block;">این تگ b است</b>

مقدار none، برای پنهان کردن یک المان در صفحه استفاده می شود.

<div style="display: block;">display: block</div>
<div style="display: none;">display: none</div>

ویژگی visibility در CSS

یکی دیگر از روش ها برای پنهان کردن المان ها در صفحه ، استفاده از ویژگی visibility است.

برای پنهان کردن المان، باید مقدار این ویژگی را برابر hidden قرار داد.

<div style="visibility: visible;">visibility: visible;</div>
<div style="visibility: hidden;">visibility: hidden</div>

نکته: همانطور که در نمونه کد بالا دیدید، تفاوت visibility: hidden با display:none در این است که فضای اشغال شده توسط visibility، نمایش داده می شود و فقط محتویات درون آن مخفی می شود.

مقدار inline-block، ترکیب دو مقدار inline و block است.

همانند block می توان:

• مقدار width و height را تغییر داد.
• مقدار margin، بالا و پایین را تغییر داد.
• مقدار padding، بالا و پایین (به صورت طبیعی) را تغییر داد.

همانند inline می توان:

• از بلوک جدید شروع نمی شود.
•  به مقدار مورد نیاز، فضا اشغال می کند.

نکته: برای اطلاعات بیشتر، به آموزش inline-block در CSS مراجعه کنید.