Margin vs Padding
تفاوت بین حاشیه و padding یک جنبه مهم در CSS است زیرا حاشیه و padding دو مفهوم مهمی هستند که در CSS برای ایجاد فاصله بین موارد مختلف استفاده می شوند. بالشتک ها و حاشیه ها قابل تعویض نیستند و اهداف متفاوتی دارند، بنابراین باید به درستی استفاده شوند. padding فضای بین محتوا و مرز یک بلوک است. از سوی دیگر، حاشیه، فضای خارج از مرز یک بلوک است. حاشیه بلوک ها را از بلوک های مجاور جدا می کند در حالی که بالشتک حاشیه را از محتوا جدا می کند.
Padding چیست؟
در CSS (Cascading Style Sheets)، padding فضایی است که بین محتوا و حاشیه حفظ می شود.محتوای یک بلوک را از لبه آن جدا می کند. بالشتک شفاف است و شامل تصویر پس‌زمینه یا رنگ پس‌زمینه عنصر نیز می‌شود. مقدار padding یک عنصر با استفاده از عبارت "padding" در کد CSS مشخص می شود. به عنوان مثال، برای افزودن یک پد 25 پیکسلی در اطراف محتوا می توان از کد زیر استفاده کرد.
div {
width: 300px;
ارتفاع: 300px;
padding: 25px;
حاشیه: 25px جامد;
}
در صورت لزوم، مقادیر مختلف padding را می توان به طور جداگانه برای چپ، راست، بالا و پایین نیز مشخص کرد. قطعه کد زیر مقادیر مختلف لایه بندی را برای هر طرف مشخص می کند.
div {
width: 300px;
ارتفاع: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
حاشیه: 25px جامد;
}
Margin چیست؟
در CSS (Cascading Style Sheets)، حاشیه فضای خارج از مرز است. یک بلوک را از سایر بلوک ها جدا می کند. حاشیه نیز شفاف است، اما تفاوت بزرگ با padding این است که حاشیه شامل تصاویر پس‌زمینه یا رنگ‌های پس‌زمینه اعمال‌شده روی عنصر نمی‌شود. مقدار مارجین در CSS با استفاده از عبارت “margin” مشخص می شود. قطعه کد زیر یک حاشیه 25 پیکسلی در اطراف بلوک div اعمال کرد.
div {
width: 320px;
ارتفاع: 320px;
حاشیه: 5px جامد;
حاشیه: 25px;
}
مقادیر مختلفی را می توان برای طرف های مختلف بلوک نیز تعیین کرد. قطعه کد زیر مقادیر حاشیه متفاوتی را برای هر طرف اعمال می کند.
div {
width: 320px;
ارتفاع: 320px;
حاشیه: 5px جامد;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
تفاوت بین Margin و Padding چیست؟
• Padding فضای بین حاشیه و محتوا است در حالی که حاشیه فضای خارج از حاشیه است.
• padding محتوای یک بلوک را از حاشیه جدا می کند. حاشیه یک بلوک را از بلوک دیگر جدا می کند.
• Padding شامل تصاویر پس‌زمینه و رنگ‌های پس‌زمینه است که روی محتوا اعمال می‌شود، در حالی که حاشیه شامل چنین مواردی نمی‌شود.
• حاشیه بلوک‌های مجاور می‌توانند همپوشانی داشته باشند در حالی که لایه‌بندی همپوشانی ندارد.
خلاصه:
Padding vs Margin
Padding فضایی در داخل مرز بلوک است که مرز را از محتوا جدا می کند. حاشیه، فاصله خارج از مرز است که یک بلوک را از بلوک های مجاور جدا می کند. تفاوت دیگر این است که padding شامل تصویر پس‌زمینه و رنگ‌های پس‌زمینه اعمال شده در اطراف محتوا است در حالی که حاشیه آن‌ها را شامل نمی‌شود. حواشی بلوک‌های مجاور ممکن است گاهی اوقات زمانی که مرورگر صفحه را رندر می‌کند با هم همپوشانی داشته باشند، اما برای padding چنین چیزی اتفاق نمی‌افتد.
