تعریف و تفاوت padding ، margin و Border در CSS

padding ، margin و Border

هر سه این موارد (padding ، margin و Border) در CSS مدیریت محتوا کاربرد دارند و Front-end کاران همگی با Padding و Margin کار دارند.

تعریف Border

و اما Border – مرز : مرز یا Border در حقیقت مرز بین Margin و padding می باشد. Border می تواند پهنا داشته باشد.

تعریف Margin

مارجین – Margin – حاشیه : فضای خود المان می باشد. چه مقدار فاصله المان مورد نظر میخواهد با دیگر المان ها داشته باشد ؟ به این فاصله margin گفته می شود.

فاصله ی خارج از border

تعریف Padding

پدینگ – Padding – لایه : چقدر یک المان با خودش فاصله داشته باشد؟ یک المان چه مقدار با المان های داخل خودش فاصله داشته باشد؟

فاصله ی بین محتوا و border

padding ، margin و Border

هر جفت Padding و Margin برای ایجاد فاصله بین المان ها استفاده می شوند، اما در روش ایجاد فاصله فرق دارند. margin با فاصله دادن المان های مجاور، گپ یا فاصله را ایجاد می کند. منتهی Padding با افزایش اندازه خود یا کوچک کردن المان های داخل خود، فاصله یا گپ را ایجاد می کند.

به صورت پیش فرض، Padding سایز المان را برای تطبیق دادن فاصله بزرگ می کند. اما اگرمقدار “box-sizing: border-box” را روی المان تنظیم کرده باشید، محتوای داخل المان را برای تطبیق فاصله کوچک می کند.

padding ، margin و Border

با اینکه مرتبا از دو خاصیت padding و margin برای افزودن حاشیه به المانهای مختلف استفاده کرده ام، لیکن هیچ وقت تفاوت دقیق بین این دو را درک نکرده بودم، تا اینکه امروز که داشتم کتاب CSS Anthology را ورق می‌زدم (البته پشت مانیتور!) متوجه تفاوت آنها شدم. هر چند در بسیاری مواقع می توان از این دو به جای هم دیگر استفاده کرد ولی تفاوت کوچکی با هم دارند: به طور ساده، margin حاشیه بیرونی است و padding حاشیه داخلی!

چه زمانی از Padding استفاده می کنیم؟

زمانی که نمیخواهید متحوای شما به لبه های container برسد و آن را لمس کند، برای مثال شما یه تعداد عنصر یا المان <p> داخل یک div (بخش) دارید و نمیخواهید که متن داخل الملان <p> مرز و لبه های div را لمس کند:padding example-1

زمانی که میخواهید پس زمینه (بکگراند) المان در فاصله یا گپ ایجاد شده نمایش داده شود. برای مثال: شما بخش هایی (div) به رنگ سبز و نارنجی در مجاورت یکدیگر دارید و میخواهید هر دو بخش به یکدیگر برسند (همدیگر را لمس کنند) اما نمیخواهید متن های داخلشان همدیگر را لمس کنند.مثال از Padding

زمانی که قصد دارید سایز یک دکمه (Button) را بزرگ کنید.padding example arisanet

چه زمانی از Margin استفاده می شود؟

زمانی که می خواهید فضایی دور یک المان داشته باشید، یا اینکه نمیخواهید المان ها یکدیگر را لمس کنند