سی‌اس‌اس/فاصله درونی

عرض و ارتفاع

فاصله درونی

حاشیه

فاصله درونی (padding)

در CSS، ویژگی padding برای ایجاد فاصلهٔ درونی بین محتوای عنصر و مرز (border) آن استفاده می‌شود. این فاصله باعث می‌شود محتوا از لبه‌ها فاصله بگیرد و خوانایی و زیبایی بهتری داشته باشد.

تعریف

ویژگی padding فاصله‌ای بین محتوای عنصر و مرز آن ایجاد می‌کند. این فاصله در داخل عنصر قرار می‌گیرد، برعکس margin که بیرون عنصر است.

نحو (Syntax)

padding: [top] [right] [bottom] [left];

مثال:

padding: 10px 20px 15px 5px;

↑ یعنی:

بالا: ۱۰px
راست: ۲۰px
پایین: ۱۵px
چپ: ۵px

اگر فقط یک مقدار داده شود، برای همهٔ جهات اعمال می‌شود.

ویژگی‌های مرتبط

برای کنترل هر جهت به‌صورت مستقل:

padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 5px;

مثال ساده

<div style="padding: 20px; border: 1px solid #000;">
    این متن از لبه‌های div فاصله دارد.
</div>

تفاوت padding با margin

ویژگی	padding	margin
مکان قرارگیری	داخل عنصر	بیرون عنصر
رنگ پس‌زمینه اعمال می‌شود؟	بله	نه
تاثیر بر ابعاد عنصر	باعث افزایش اندازه واقعی عنصر می‌شود	نه (در حالت معمول)

استفاده از واحدهای نسبی

برای طراحی ریسپانسیو بهتر است از em، rem یا % استفاده شود:

padding: 2rem;

padding: 5% 10%;

مثال: دکمه با فاصله درونی مناسب

<button style="padding: 10px 20px;">
    کلیک کن
</button>

تاثیر در تجربه کاربری (UX)

استفاده صحیح از padding باعث افزایش وضوح، خوانایی و تعامل بهتر کاربر با رابط می‌شود. در طراحی دکمه‌ها، کارت‌ها، فرم‌ها و منوها، این ویژگی نقش مهمی دارد.

تاثیر در سئو

اگرچه padding مستقیماً در رتبه‌بندی سئو تأثیر ندارد، اما رابط کاربری بهتر = تجربه کاربری بهتر = نرخ تعامل بالاتر، که تأثیر غیرمستقیم در سئو دارد.

تمرین: طراحی یک کارت محتوا

<div style="padding: 1rem; background-color: #f9f9f9; border: 1px solid #ccc;">
    <h2>عنوان</h2>
    <p>محتوای این کارت با فاصلهٔ مناسب از لبه‌ها نمایش داده شده است.</p>
</div>

جمع‌بندی

ویژگی padding یکی از ابزارهای پایه‌ای و بسیار مؤثر در CSS برای طراحی رابط کاربری زیبا، خوانا و هماهنگ است. درک تفاوت آن با margin و استفاده درست از آن، باعث ایجاد طراحی حرفه‌ای‌تر و تجربه کاربری بهتر می‌شود.

مطالعه بیشتر: