آموزش خاصیت display در CSS

خاصیت display تعیین می کند آیا المانی نمایش داده شود یا خیر و همچنین نحوه ی نمایش المان را مشخص می کند .

خاصیت دیگر نیز visibility است که تعیین می کند عنصری قابل رویت باشد یا خیر (پنهان باشد ).

پنهان سازی المان

پنهان سازی یک عنصر را می توان با تخصیص مقدار ” none ” به خاصیت display و یا تخصیص ” hidden ” به خاصیت visibility انجام داد .

با این وجود لازم است توجه داشته باشید که دو روش مذکور نتایج متفاوتی را به دست می دهند.

visibility : hidden عنصر مربوطه را پنهان می کند ولی دقیقا همان فضایی را که از قبل به خود اختصاص داده بود را اشغال می کند . به عبارتی دیگر, المان مخفی خواهد شد ولی در عین حال layout (شِمای کلی) را تحت تاثیر قرار می دهد.

مثال

display : none عنصر مورد نظر را مخفی می سازد ، ولی درست برخلاف visibility : hidden هیچ فضایی را اشغال
نمی کند . المان پنهان گشته و صفحه ی مورد نظر به گونه ای نمایش داده می شود که گویی آن المان اصلا حضور ندارد.

مثال

خاصیت Display در CSS – عناصر Block و Inline

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

مثال هایی از المان های block زیر ارائه شده

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

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

نمونه هایی از آن را زیر مشاهده می کنید

• <span>
• <a>

اصلاح نحوه ی نمایش یک عنصر

تغییر یک المان درون خطی ( inline element ) به یک block element ، و یا عکس آن ، می تواند در تنظیم ظاهر وب به صورت دلخواه ، ولی با رعایت استانداردهای فعلی وب برای طراح بسیار مفید واقع شود .

مثال ذیل المان های <li> را به صورت درون خطی ( inline ) نمایش می دهد.

مثال

حال این مثال عناصر <span> را به صورت مجزا (block ) نمایش می دهد.

مثال

نکته: تنظیم خاصیت display تنها نحوه ی نمایش المان را تغییر می دهد و نه نوع المان مورد نظر را .

از این رو یک عنصر درون خطی ( inline ) با display : block اجازه ی جای دادن دیگر المان های block در خود را ندارد.