صفت «display»

مهمترین صفت در CSS برای کنترل پیکربندی display است. هر عنصری، با توجه به نوعش، یک مقدار پیش فرض برای display دارد. معمولا این مقدار پیش فرض برای بیشتر عنصر‌ها block یا inline است. یک عنصر با block معمولا عنصر سطح بلاک خوانده می‌شود. به یک عنصر با inline عنصر درون خطی می‌گویند.

block

<div>

div عنصر سطح بلاک استاندارد است. یک عنصر سطح بلاک از خط جدید آغاز می‌شود و از چپ و راست تا جایی که می‌تواند به کناره‌ها کشیده می‌شود. سایر عناصر معمول سطح بلاک عبارتند از p و form و در HTML5 عناصر جدیدتر header، footer، section اضافه شده اند. عناصر زیاد دیگری هم وجود دارند.

</div>

inline

span ‌عنصر استاندارد درون‌خطی است. یک عنصر درون‌خطی به متن درونش در هر پاراگراف می‌چسبد و آن را احاطه می‌کند.‌ <span> مثل این </span> بدون این که برای سایر قسمت‌های پاراگراف مزاحمتی ایجاد کند. عنصر a رایج‌ترین عنصر درون‌خطی است، زیرا برای پیوند‌ها به کار می‌رود.

none

یکی دیگر از مقادیر رایج برای display مقدار none است. برخی عنصرهای خاص مانند script از این مقدار به طور پیش‌فرض استفاده می‌‌کنند. در جاوا‌اسکریپت از این ویژگی برای پنهان نمودن پویای برخی از قسمت‌های صفحه، بدون حذف نمودن آنها استفاده می‌شود.

این کار با پنهان‌سازی به کمک visibility تفاوت دارد. قرار دادن display به none جایی را که عنصر در آن بوده است را رزرو نمی‌کند، اما استفاده از visibility: hidden; یک فضای خالی را نگه خواهد داشت.

You found me!

سایر مقادیر برای display

برای display مقادیر قابل پذیرش دیگری هم وجود دارند که کاربرد‌های خاص خودشان را دارند، مثل list-item و table. در اینجا لیست کاملی از این مقادیر را می‌توانید ببینید. ما در باره‌ی inline-block و flex در ادامه همین آموزش صحبت خواهیم کرد.

توضیحات بیشتر

همان طور که اشاره کردم، هر عنصر یک مقدار پیش فرض برای display دارد. با وجود این، شما همیشه می‌توانید این مقدار پیش‌فرض را بازنویسی کنید! البته دقت داشته باشید که اگر چه به طور کلی بی‌معنی خواهد بود که یک عنصر div را درون‌خطی کنیم، اما گاهی معانی خاصی مد نظر هستند، و از این ویژگی می‌توان برای اختصاصی‌سازی نمایش عناصر استفاده کرد. یک مثال متداول، درون خطی کردن عنصر‌های li برای نمایش لیست‌های افقی در منو‌ها است.

  • Creative Commons License