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