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

مقدمه

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

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

Margin فاصله بیرونی یک عنصر نسبت به عناصر اطراف را مشخص می‌کند. این ویژگی باعث می‌شود عناصر به هم نچسبند و طراحی منظم‌تر و خواناتری داشته باشید.

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

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

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

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

div {
  margin: 20px;
}

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

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

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

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

وسط‌چین کردن عنصر:

.container {
  width: 400px;
  margin: 0 auto;
}

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

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

ادامه آموزش CSS

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