فاصله خارجی با margin در CSS
در طراحی وب، کنترل فاصله‌ها بین عناصر یکی از اساسی‌ترین مهارت‌هاست. خاصیت margin در CSS به شما امکان می‌دهد فاصله خارجی یک عنصر از عناصر مجاورش را تنظیم کنید. این ویژگی نقش کلیدی در ایجاد چیدمان‌های منسجم و خوانا دارد.
نکته: margin برخلاف padding که فضای داخلی ایجاد می‌کند، فاصله خارجی عنصر را کنترل می‌کند.
انواع مقداردهی به margin
شما می‌توانید margin را به چهار روش مختلف مقداردهی کنید:
- مقدار واحد: margin: 10px; (اعمال به چهار جهت)
- دو مقدار: margin: 10px 20px; (بالا/پایین و چپ/راست)
- سه مقدار: margin: 10px 20px 15px; (بالا، چپ/راست، پایین)
- چهار مقدار: margin: 10px 20px 15px 5px; (بالا، راست، پایین، چپ)
| خاصیت |
توضیح |
| margin-top |
تنظیم فاصله از بالا |
| margin-right |
تنظیم فاصله از راست |
| margin-bottom |
تنظیم فاصله از پایین |
| margin-left |
تنظیم فاصله از چپ |
کاربردهای عملی margin
در پروژه‌های واقعی، margin به شما کمک می‌کند:
- ایجاد فاصله بین بخش‌های مختلف صفحه
- تراز کردن عناصر نسبت به یکدیگر
- جلوگیری از چسبندگی عناصر به هم
- ایجاد فضای خونی (White Space) برای بهبود خوانایی
برای مثال‌های پیشرفته‌تر می‌توانید اینجا را بررسی کنید تا تکنیک‌های ترکیبی با دیگر خاصیت‌های CSS را بیاموزید.
نکات فنی مهم
در استفاده از margin باید به چند نکته کلیدی توجه کنید:
توجه: margin می‌تواند مقادیر منفی بگیرد (margin:-10px) که باعث همپوشانی عناصر می‌شود.
توجه: margin در عناصر inline فقط بر چپ و راست اثر می‌گذارد (بالا و پایین بی‌تاثیر است).
با تسلط بر خاصیت margin، کنترل کاملی بر چیدمان عناصر صفحه خواهید داشت. این ویژگی به همراه padding و border سه پایه اصلی جعبه مدل CSS (Box Model) را تشکیل می‌دهند.
