display در css

خصوصیت display در css از مهم ترین خصوصیات است که با استفاده از آن می توان layout را تنظیم کرد.

خصوصیت display در css

خصوصیت display نحوه نمایش المان ها را مشخص می کند.
هر المان HTML بسته به نوع آن، مقادیر display پیش فرضی دارد.  مقدار display در css به صورت پیش فرض، برای بیشتر المان ها block یا inlineاست.

Block-level Elements

یک المان block-level المانی است که همیشه از یک سطر جدید آغاز می شود و بیشترین عرضی را که امکان دارد، اشغال می کند. (در حدی که ممکن باشد، در راستای چپ و راست کشیده می شود)

مثال هایی از عناصر block-level:

• <div>
• <h1> – <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

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

span {
  display: block;
}

و مثال زیر، المان a را به صورت المان block در آورده است:

a {
  display: block;
}

hide کردن المان، display:none یا visibility:hidden

hide کردن (پنهان کردن) یک المان با مقدار دهی خصوصیت display به none انجام می شود. با اعمال این ویژگی، المان پنهان می شود و صفحه طوری نمایش می یابد که انگار این المان وجود نداشته است.

h1.hidden {
  display: none;
}

همچنین اگر visibility:hidden; باشد، المان پنهان می شود، با این تفاوت که این بار، فضای اشغال شده توسط المان مانند قبل است و همچنان بر روی چیدمان صفحه، تاثیر می گذارد.

h1.hidden {
 visibility: hidden;
}

برگرفته از وب سایت w3schools.com