خاصیت display در CSS

خاصیت Display در CSS

Wiki

خصوصیت display چگونگی نمایش یک عنصر را مشخص می کند و خصوصیت visibility، یک عنصر را پنهان(hidden) یا قابل رویت(visible) می کند.

Box 1

Box 2

Box 3

پنهان کردن یک عنصر(Hidden)

Wiki

برای پنهان کردن یک عنصر دو روش وجود دارد:

1. خصوصیت display را با مقدار "none" تنظیم کنیم
2. خصوصیت visibility را با مقدار "hidden" تنظیم کنیم

به هرحال باید توجه داشته باشید که این دو روش، نتایج مختلفی را تولید خواهند کرد.

در روش دوم (visibility:hidden) عنصر پنهان خواهد شد ولی اثر آن یا به عبارتی فضایی که اشغال کرده است، در صفحه باقی خواهد ماند:

در روش اول (display:none) عنصر حذف می شود و اثری از آن در صفحه باقی نخواهد ماند:

عناصر inline و block

Wiki

block: یک عنصر block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

مثال برای عناصر Block:

• <h1>
• <p>
• <div>

inline: یک عنصر inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.

مثال برای عناصر inline:

• <span>
• <a>

چگونه طریقه نمایش یک عنصر را تغییر دهیم

Wiki

تغییر یک عنصر inline به block و برعکس می تواند برای ساخت ظاهر یک صفحه مفید باشد.

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

مثال زیر عنصر span را به عنوان یک عنصر block نمایش می دهد:

توجه: تغییر نوع نمایش یک عنصر، تنها چگونگی نمایش عنصر را تغییر می دهد و نوع، تغییر نخواهد کرد. برای مثال یک عنصر inline که برای آن display:block تنظیم شده است اجازه نمی دهد که یک عنصر block به صورت تودرتو داخل آن قرار داده شود.

مثال - خودتان امتحان کنید

Wiki

نمایش یک عنصر به صورت inline
این مثال نشان می دهد که چگونه یک عنصر را به صورت inline نمایش دهیم.

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

تنظیم خصوصیت display با مقدار collapse برای یکی از ردیفهای جدول
این مثال نشان می دهد که چگونه یکی از ردیف های جدول را ویران یا collapse کنیم.