close
تبلیغات در اینترنت
تفاوت padding و margin در CSS
loading...

.: دریــــا ســـافــــت :.

آیا margin با padding فرق داره؟با اینکه مرتبا از دو خاصیت padding و margin برای افزودن حاشیه به المانهای مختلف استفاده کرده ام، لیکن هیچ وقت تفاوت دقیق…

تفاوت padding و margin در CSS


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

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

Admin بازديد : 371 سه شنبه 10 ارديبهشت 1392 زمان : 6:11 نظرات ()
ارسال نظر براي اين مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
تبليغات
موضوعات

لينک دوستان

نظرسنجي
آیا با آموزش دروس دبیرستان در این وبلاگ موافقید؟