سلام خدمت شما دوستان عزیز در مورد خاصیت   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 (درون خطی) تنها به اندازه ی لازم پهنا را می گیرد و هیچ خط فاصله ی ایجاد نمی کند, که حالت پیش فرض می باشد .

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

<span>

<a>

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

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

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

مثال :

نمونه سه
?
۱
۲
۳

li {
display: inline;
}

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

مثال :

نمونه چهار
?
۱
۲
۳

span {
display: block;
}

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