آموزش نمایش و قابلیت دیده شدن در CSS

آموزش خاصیت display

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

پنهان سازی المان – display : none یا visibility : hidden

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

        h1.hidden {
            visibility: hidden;
        }

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

        h1.hidden {
            display: none;
        }

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

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

                 h1
                 p
                 li 
                 div
                

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

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

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

        li {
            display: inline;
        }

        span {
            display: block;
        }