BenoService

آکادمی بنو/آموزش CSS

Display، Visibility و Opacity در CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

تا اینجا با مفاهیمی مثل رنگ، فونت، اندازه، Box Model، فاصله‌ها، عرض و ارتفاع عناصر آشنا شدیم. اما هنوز یک سؤال مهم باقی مانده است: CSS چگونه مشخص می‌کند یک عنصر در صفحه چگونه قرار بگیرد یا حتی نمایش داده شود؟

برای مثال ممکن است بخواهیم چند عنصر را در یک خط قرار دهیم، یک عنصر را از صفحه حذف کنیم، بدون حذف فضای آن را پنهان کنیم، یا فقط شفافیت آن را کاهش دهیم.

در CSS سه ویژگی بسیار مهم برای این موضوع وجود دارد:

  • display

  • visibility

  • opacity

این سه ویژگی در ظاهر ممکن است شبیه به هم به نظر برسند، اما رفتار کاملاً متفاوتی دارند. درک تفاوت آن‌ها در طراحی صفحات وب بسیار مهم است.

display چیست؟

ویژگی display مشخص می‌کند یک عنصر چگونه در ساختار نمایش صفحه قرار بگیرد.

به زبان ساده، با display می‌توانیم تعیین کنیم که یک عنصر:

  • به صورت بلوکی نمایش داده شود.

  • درون یک خط قرار بگیرد.

  • مانند یک عنصر inline رفتار کند ولی بتواند ابعاد مشخصی داشته باشد.

  • یا اصلاً در صفحه نمایش داده نشود.

ساختار کلی:

selector {
    display: value;
}

برای مثال:

.box {
    display: block;
}

ویژگی display یکی از ویژگی‌های اصلی CSS برای کنترل نحوه قرارگیری Boxهای عناصر در Layout است.

مقدار block

یکی از مهم‌ترین مقادیر display، مقدار block است:

display: block;

یک عنصر Block معمولاً از یک خط جدید شروع می‌شود و فضای موجود در جهت افقی را تا حد ممکن اشغال می‌کند.

برای مثال:

<div>بخش اول</div>
<div>بخش دوم</div>
<div>بخش سوم</div>

به‌صورت پیش‌فرض این عناصر زیر یکدیگر قرار می‌گیرند.

می‌توانیم به‌صورت صریح نیز بنویسیم:

div {
    display: block;
}

برخی عناصر HTML مانند div، p و Headingها به‌صورت پیش‌فرض رفتار Block دارند.

مقدار inline

در مقابل block، مقدار inline قرار دارد:

display: inline;

عنصر Inline معمولاً در همان خط محتوای اطراف خود قرار می‌گیرد.

مثلاً:

<p>
    این یک متن
    <span>مهم</span>
    در داخل پاراگراف است.
</p>

عنصر span به‌صورت پیش‌فرض Inline است.

اگر بنویسیم:

span {
    display: inline;
}

این عنصر در جریان متن قرار می‌گیرد و به‌صورت معمول باعث ایجاد خط جدید نمی‌شود.

تفاوت Block و Inline

به یک مثال ساده توجه کنید:

<div>Box 1</div>
<div>Box 2</div>

با:

div {
    display: block;
}

نتیجه تقریباً چنین خواهد بود:

Box 1
Box 2

اما اگر:

div {
    display: inline;
}

باشد، در صورت وجود فضای کافی، عناصر می‌توانند در یک خط قرار بگیرند:

Box 1 Box 2

بنابراین یکی از تفاوت‌های مهم این دو رفتار، نحوه قرارگیری عنصر در جریان عادی صفحه است.

مقدار inline-block

مقدار بسیار کاربردی دیگر:

display: inline-block;

است.

inline-block ترکیبی از دو رفتار است.

عنصر:

  • در کنار عناصر دیگر می‌تواند در یک خط قرار بگیرد.

  • اما برخلاف inline می‌توانیم برای آن width و height و سایر ویژگی‌های مربوط به Box را راحت‌تر استفاده کنیم.

مثال:

<a href="#">خانه</a>
<a href="#">محصولات</a>
<a href="#">تماس با ما</a>
a {
    display: inline-block;
    width: 120px;
    padding: 10px;
}

در این حالت لینک‌ها می‌توانند در یک خط قرار بگیرند و در عین حال ابعاد و Padding مشخصی داشته باشند.

یک مثال برای ساخت منوی ساده

فرض کنید یک منوی ساده داریم:

<nav>
    <a href="#">خانه</a>
    <a href="#">درباره ما</a>
    <a href="#">خدمات</a>
    <a href="#">تماس با ما</a>
</nav>

CSS:

nav a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
}

در نتیجه لینک‌ها می‌توانند در کنار یکدیگر قرار بگیرند.

در پروژه‌های مدرن معمولاً برای Layoutهای پیچیده‌تر از Flexbox و Grid استفاده می‌کنیم که در مقالات آینده به‌صورت کامل بررسی خواهند شد.

display: none

یکی از مهم‌ترین کاربردهای display، مخفی کردن کامل یک عنصر است:

display: none;

مثال:

<p class="message">
    این پیام نمایش داده نمی‌شود.
</p>
.message {
    display: none;
}

در این حالت عنصر دیگر در Layout صفحه حضور ندارد.

یعنی مرورگر صفحه را طوری Layout می‌کند که انگار این عنصر در آن قسمت وجود ندارد. همچنین display: none عنصر را از Accessibility Tree نیز حذف می‌کند.

display: none چه اتفاقی برای فضای عنصر می‌اندازد؟

به مثال زیر توجه کنید:

<div class="box">Box 1</div>
<div class="hidden">Box 2</div>
<div class="box">Box 3</div>
.box {
    padding: 20px;
    border: 1px solid black;
}

.hidden {
    display: none;
}

در صفحه فقط Box 1 و Box 3 دیده می‌شوند و فضای Box 2 نیز وجود نخواهد داشت.

یعنی:

Box 1

Box 3

نه اینکه جای Box 2 خالی بماند.

visibility

ویژگی دیگری که برای نمایش یا مخفی کردن عناصر استفاده می‌شود:

visibility

است.

ساختار:

.element {
    visibility: hidden;
}

مهم‌ترین مقادیر آن:

visibility: visible;
visibility: hidden;

مقدار visible حالت معمول را نمایش می‌دهد.

مقدار hidden عنصر را از نظر بصری مخفی می‌کند، اما فضایی که عنصر در Layout اشغال کرده است همچنان باقی می‌ماند.

مثال visibility: hidden

<div class="box">Box 1</div>
<div class="hidden">Box 2</div>
<div class="box">Box 3</div>
.box,
.hidden {
    padding: 20px;
    border: 1px solid black;
}

.hidden {
    visibility: hidden;
}

در این حالت Box 2 دیده نمی‌شود، اما فضای آن همچنان وجود دارد.

تقریباً چنین فضایی خواهیم داشت:

Box 1

[ فضای Box 2 ]

Box 3

تفاوت display: none و visibility: hidden

این تفاوت را حتماً به خاطر بسپارید.

ویژگی

display: none

visibility: hidden

عنصر دیده می‌شود؟

خیر

خیر

فضای عنصر باقی می‌ماند؟

خیر

بله

در Layout حضور دارد؟

خیر

بله

برای مخفی‌کردن کامل مناسب است؟

بله

در موارد خاص

عنصر از Accessibility Tree حذف می‌شود؟

بله

بله

بنابراین:

display: none;

یعنی:

عنصر را از Layout حذف کن.

در حالی که:

visibility: hidden;

یعنی:

عنصر را نبین، اما فضای آن را حفظ کن.

opacity چیست؟

ویژگی سوم:

opacity

برای کنترل شفافیت عنصر استفاده می‌شود.

ساختار:

.element {
    opacity: value;
}

مقدار معمول آن بین 0 و 1 قرار دارد:

opacity: 1;

یعنی کاملاً قابل مشاهده.

opacity: 0.5;

یعنی نیمه شفاف.

opacity: 0;

یعنی کاملاً شفاف.

طبق مشخصات CSS، مقدار 0 کاملاً شفاف و مقدار 1 کاملاً غیرشفاف است.

مثال opacity

<div class="normal">
    عنصر معمولی
</div>

<div class="transparent">
    عنصر شفاف
</div>
.normal {
    opacity: 1;
}

.transparent {
    opacity: 0.4;
}

عنصر دوم همچنان در صفحه وجود دارد، اما محتوای آن کم‌رنگ‌تر دیده می‌شود.

آیا opacity: 0 همان display: none است؟

خیر.

این یکی از اشتباهات رایج در CSS است.

اگر بنویسیم:

.box {
    opacity: 0;
}

عنصر از نظر ظاهری کاملاً نامرئی می‌شود، اما همچنان در DOM و Layout وجود دارد. حتی در شرایط مناسب می‌تواند همچنان رویدادهای pointer را دریافت کند و عناصر قابل فوکوس آن نیز در مسیر Tab باقی بمانند.

اما:

.box {
    display: none;
}

عنصر را از Layout خارج می‌کند.

بنابراین این سه حالت را با هم مقایسه کنید:

/* حذف از Layout */
display: none;
/* مخفی ولی دارای فضا */
visibility: hidden;
/* نامرئی ولی همچنان در صفحه */
opacity: 0;

مقایسه سه ویژگی اصلی

ویژگی

دیده می‌شود؟

فضای عنصر باقی می‌ماند؟

کاربرد اصلی

display: none

❌

❌

حذف کامل از Layout

visibility: hidden

❌

✅

مخفی کردن بدون حذف فضا

opacity: 0

❌

✅

شفاف کردن عنصر

opacity: 0.5

نیمه‌شفاف

✅

ایجاد شفافیت

این تفاوت یکی از مهم‌ترین نکات این مقاله است.

یک مثال عملی برای درک تفاوت‌ها

HTML:

<div class="container">

    <div class="box normal">
        Normal
    </div>

    <div class="box none">
        Display None
    </div>

    <div class="box hidden">
        Visibility Hidden
    </div>

    <div class="box transparent">
        Opacity 0
    </div>

</div>

CSS:

.container {
    width: 90%;
    max-width: 600px;
    margin: 30px auto;
}

.box {
    padding: 20px;
    margin-bottom: 10px;
    border: 2px solid #333;
}

.none {
    display: none;
}

.hidden {
    visibility: hidden;
}

.transparent {
    opacity: 0;
}

حالا رفتار هر کدام را بررسی کنید:

normal

کاملاً نمایش داده می‌شود.

none

اصلاً در Layout حضور ندارد.

hidden

دیده نمی‌شود، ولی فضای آن باقی می‌ماند.

transparent

کاملاً شفاف است، ولی فضای آن باقی می‌ماند و خود عنصر همچنان وجود دارد.

display و عرض و ارتفاع

یکی از نکات مهم برای مبتدیان این است که رفتار width و height با توجه به نوع نمایش عنصر متفاوت است.

برای مثال:

span {
    display: inline;
    width: 200px;
    height: 100px;
}

نباید انتظار داشته باشیم عنصر Inline دقیقاً مانند یک عنصر Block با ابعاد مشخص رفتار کند.

اگر بخواهیم عنصری هم در خط قرار بگیرد و هم رفتار Box مناسبی داشته باشد، می‌توانیم از:

display: inline-block;

استفاده کنیم.

مثلاً:

span {
    display: inline-block;
    width: 200px;
    height: 100px;
}

تغییر رفتار پیش‌فرض عناصر

یکی از قابلیت‌های مهم CSS این است که می‌توانیم رفتار پیش‌فرض عنصر را تغییر دهیم.

مثلاً:

<div class="item">آیتم اول</div>
<div class="item">آیتم دوم</div>

به‌صورت معمول div رفتار Block دارد.

اما:

.item {
    display: inline-block;
}

باعث می‌شود این عناصر بتوانند در یک خط قرار بگیرند.

برعکس، می‌توانیم یک عنصر Inline را نیز به Block تبدیل کنیم:

span {
    display: block;
}

بنابراین display فقط برای مخفی کردن عناصر نیست؛ بلکه یکی از ابزارهای اصلی کنترل رفتار Boxها در CSS است.

display: flex و display: grid

در CSS مقادیر بسیار مهم دیگری مانند:

display: flex;

و:

display: grid;

نیز وجود دارند.

این دو مقدار پایه Layoutهای مدرن وب هستند.

برای مثال:

.container {
    display: flex;
}

یا:

.container {
    display: grid;
}

اما فعلاً وارد جزئیات آن‌ها نمی‌شویم.

در بخش‌های بعدی دوره، Flexbox و Grid را به‌صورت کامل و پروژه‌محور یاد خواهیم گرفت.

چه زمانی از هرکدام استفاده کنیم؟

یک راهنمای ساده:

وقتی می‌خواهید عنصر کاملاً از Layout حذف شود

از:

display: none;

استفاده کنید.

وقتی می‌خواهید عنصر دیده نشود ولی فضای آن باقی بماند

از:

visibility: hidden;

استفاده کنید.

وقتی می‌خواهید عنصر شفاف یا نیمه‌شفاف شود

از:

opacity: 0.5;

یا مقدار مناسب دیگری استفاده کنید.

وقتی می‌خواهید یک عنصر کاملاً شفاف باشد

می‌توانید از:

opacity: 0;

استفاده کنید، اما توجه داشته باشید که این روش عنصر را از Layout یا تعاملات صفحه حذف نمی‌کند.

یک مثال کاربردی: مخفی کردن پیام

فرض کنید یک پیام داریم:

<div class="message">
    عملیات با موفقیت انجام شد.
</div>

می‌توانیم آن را مخفی کنیم:

.message {
    display: none;
}

اگر بعداً با JavaScript بخواهیم آن را نمایش دهیم، می‌توانیم مقدار display را تغییر دهیم.

مثلاً:

.message.show {
    display: block;
}

HTML:

<div class="message show">
    عملیات با موفقیت انجام شد.
</div>

در آینده، هنگام یادگیری JavaScript، می‌توانیم این کلاس را به‌صورت پویا اضافه یا حذف کنیم.

یک مثال کاربردی: شفافیت هنگام Hover

یکی از کاربردهای رایج opacity ایجاد یک افکت ساده هنگام قرار گرفتن موس روی عنصر است.

HTML:

<img
    class="product-image"
    src="images/product.jpg"
    alt="محصول"
>

CSS:

.product-image {
    opacity: 1;
}

.product-image:hover {
    opacity: 0.7;
}

حالا وقتی موس روی تصویر قرار بگیرد، تصویر کمی شفاف می‌شود.

این تکنیک بعداً همراه با transition می‌تواند جلوه بسیار زیباتری ایجاد کند.

اشتباهات رایج

اشتباه اول: فکر کردن display: none فقط عنصر را نامرئی می‌کند

این تصور دقیق نیست.

display: none;

عنصر را از جریان Layout خارج می‌کند.

اشتباه دوم: انتظار داشتن از visibility: hidden برای حذف فضا

این کد:

visibility: hidden;

فضای عنصر را حفظ می‌کند.

اگر می‌خواهید فضا نیز حذف شود:

display: none;

گزینه مناسب‌تری است.

اشتباه سوم: استفاده از opacity: 0 برای حذف عنصر

این کار ممکن است باعث مشکلاتی در تعاملات صفحه شود.

مثلاً:

button {
    opacity: 0;
}

ممکن است دکمه دیده نشود، اما همچنان در صفحه وجود داشته باشد و بسته به شرایط بتواند تعامل دریافت کند.

پس اگر هدف شما حذف یک دکمه از Layout است، opacity: 0 انتخاب مناسبی نیست.

اشتباه چهارم: تصور اینکه همه عناصر رفتار یکسانی دارند

این دو:

display: block;

و:

display: inline;

رفتار یکسانی ندارند.

همچنین inline-block نیز ویژگی‌های مخصوص خود را دارد.

شناخت این تفاوت‌ها برای طراحی Layout ضروری است.

پروژه کوچک: کارت محصول

حالا یک مثال ساده‌تر و واقعی‌تر ایجاد کنیم.

HTML:

<div class="product-card">

    <h2>دوره طراحی وب</h2>

    <p>
        آموزش HTML و CSS از سطح مقدماتی تا حرفه‌ای.
    </p>

    <a href="#" class="button">
        مشاهده دوره
    </a>

</div>

CSS:

.product-card {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.button {
    display: inline-block;
    padding: 10px 18px;
    text-decoration: none;
    background-color: #222;
    color: white;
}

.button:hover {
    opacity: 0.8;
}

در این مثال:

.button {
    display: inline-block;
}

باعث می‌شود لینک مانند یک Box قابل تنظیم رفتار کند.

و:

.button:hover {
    opacity: 0.8;
}

باعث می‌شود هنگام Hover کمی شفاف شود.

تمرین‌های مقاله

تمرین ۱

سه div ایجاد کنید:

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

کاری کنید که هر سه در یک خط قرار بگیرند.

راهنمایی:

display: inline-block;

تمرین ۲

یک عنصر ایجاد کنید و با:

display: none;

آن را مخفی کنید.

سپس آن را با:

display: block;

دوباره نمایش دهید.

تمرین ۳

سه عنصر مشابه بسازید و روی هرکدام یکی از این ویژگی‌ها را قرار دهید:

display: none;
visibility: hidden;
opacity: 0;

سپس تفاوت فضای باقی‌مانده و رفتار آن‌ها را بررسی کنید.

تمرین ۴

یک دکمه طراحی کنید و با opacity کاری کنید که هنگام Hover کمی شفاف شود.

مثلاً:

button:hover {
    opacity: 0.7;
}

جمع‌بندی

در این مقاله با سه ویژگی مهم CSS آشنا شدیم.

display برای کنترل نوع نمایش و نحوه قرارگیری عنصر در Layout استفاده می‌شود. مقادیری مانند block، inline و inline-block از مهم‌ترین حالت‌های آن در سطح مقدماتی هستند.

display: none عنصر را از Layout حذف می‌کند.

visibility: hidden عنصر را پنهان می‌کند، اما فضای آن را در Layout حفظ می‌کند.

opacity میزان شفافیت عنصر را کنترل می‌کند و حتی با مقدار 0 نیز عنصر همچنان در ساختار صفحه باقی می‌ماند.

اگر این سه مفهوم را به‌خوبی یاد بگیرید، در ادامه کار با Layoutهای CSS بسیار راحت‌تر خواهید بود.

۲۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.