آموزش کار با ویژگی Padding در CSS

مقدمه

ویژگی Padding در CSS برای ایجاد فاصله داخلی بین محتوای عنصر و حاشیه آن استفاده می‌شود. این ویژگی نقش بسیار مهمی در خوانایی، زیبایی و طراحی حرفه‌ای رابط کاربری دارد. اگر می‌خواهید به صورت کامل CSS را یاد بگیرید و مهارت طراحی واکنش‌گرا کسب کنید، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Padding در CSS

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

خصوصیات اصلی Padding:

• padding-top → فاصله داخلی بالا
• padding-right → فاصله داخلی راست
• padding-bottom → فاصله داخلی پایین
• padding-left → فاصله داخلی چپ
• padding → شورت‌هند برای همه جهات

مثال عملی با کد

تعریف فاصله داخلی ساده:

div {
  padding: 20px;
}

تنظیم جداگانه جهات:

.box {
  padding-top: 10px;
  padding-left: 30px;
}

استفاده از شورت‌هند چهارجهته:

.card {
  padding: 10px 20px 30px 40px;
}

نمونه کاربردی در دکمه:

button {
  padding: 12px 25px;
}

نکات مهم و توضیحات تکمیلی

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

ادامه آموزش CSS

برای یادگیری کامل چیدمان حرفه‌ای، طراحی رابط کاربری مدرن و تسلط کامل بر CSS، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.