تفاوت padding و margin در CSS

آیا margin با padding فرق داره؟

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

نوشته داخل این جعبه، فاقد هرگونه margin و padding است و البته کمی ناجور به نظر می رسد!
نوشته داخل این جعبه، دارای margin به اندازه ۱em و بدون padding است. ملاحظه می شود که از المانهای بیرونی اندکی فاصله گرفته ولی متن داخل آن به کادر چسبیده است! همچنان اندکی نافرم است.
نوشته داخل این جعبه، دارای padding به میزان ۱em است ولی margin ندارد. دقت کنید که این متن از کادر فاصله دارد ولی خود کادر از المانهای اطراف فاصله ندارد! کمی بهتر شد.
این جعبه نوشته، هم دارای margin و هم padding است. درست همان چیزی که می خواستیم!

کدهای این چهار جعبه در زیر مشاهده می شود.

Share

32 نظر در “تفاوت padding و margin در CSS

  1. با سلام؛
    بسیار عالی بود.
    متاسفانه افرادی مثل بنده که تسلط کافی بر کدنویسی ندارند، می بایست برای یادگیری هر یک از این موارد زمان زیادی را صرف نمایند. در صورتی که با آموزش به این شیوه جذاب و کاربردی، زمان زیادی صرفه جویی می شود.
    با تشکر.

پاسخ دادن به احمد رضا رستمي لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *