تفاوت Margin و Padding در CSS
در طراحی وب، Margin و Padding دو مفهوم اساسی در مدل جعبه‌ای (Box Model) هستند که فضای اطراف عناصر را کنترل می‌کنند. درک صحیح این دو ویژگی، کلید ایجاد طرح‌بندی‌های حرفه‌ای است.
Padding چیست؟
Padding فضای داخلی بین محتوای یک عنصر و حاشیه آن است. این ویژگی چهار مقدار دارد که می‌توانید تنظیم کنید:
- padding-top
- padding-right
- padding-bottom
- padding-left
| ویژگی |
توضیح |
| padding: 10px; |
اعمال 10 پیکسل padding به همه جهات |
| padding: 5px 10px; |
5 پیکسل بالا/پایین، 10 پیکسل چپ/راست |
نکته: Padding بخشی از ابعاد عنصر محسوب می‌شود و بر روی پس‌زمینه عنصر تأثیر می‌گذارد.
Margin چیست؟
Margin فضای خارجی بین حاشیه عنصر و عناصر مجاور است. برخلاف padding، margin بر روی پس‌زمینه عنصر تأثیری ندارد.
- margin-top: فاصله از بالا
- margin-right: فاصله از راست
- margin-bottom: فاصله از پایین
- margin-left: فاصله از چپ
مثال کاربردی: Margin و padding چیست به یک آموزش کامل درباره مدل جعبه‌ای اشاره می‌کند که شامل جزئیات بیشتری درباره margin و padding است.
تفاوت‌های کلیدی
| مقایسه |
Margin |
Padding |
| موقعیت |
خارج از border |
داخل border |
| تأثیر بر background |
ندارد |
دارد |
نکته حرفه‌ای: مقدار auto برای margin به صورت افقی، عنصر را در صفحه وسط‌چین می‌کند (margin: 0 auto;)
