مفهوم Padding و Margin و تفاوت‌های آن‌ها در CSS

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

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

padding و margin در css

 

padding یا لایه داخلی

همونطور که در تصویر بالا مشاهده میکنید در اطراف هر باکس یا نوشته تا خط مرزی فضایی قرار دارد که میتوانیم این فضا رو با مشخصه padding کنترل کنیم.

رنگ ناحیه لایه داخلی یا همون padding مطابق با رنگ زمینه ای خواهد بود که برای باکس یا مطلب درنظر میگیریم.همچنین میتونیم این فضا رو از چهار جهت بالا ، راست ، پایین و چپ کنترل کنیم و تغییر بدیم. به مثال زیر توجه کنید :

 

padding: 5px 6px 7px 8px;

اگر از درس گذشته بخاطر داشته باشید باید الان بدونید که در مثال بالا میزان فضای اختصاص داده شده از بالا ۵px ، از راست ۶px ، از پایین ۷px و از سمت چپ ۸px هست . میتونیم این موارد رو به صورت جدا مورد استفاده قرار بدیم ، به عنوان مثال ما قصد داریم فقط از سمت راست یک فضای ۱۰ پیکسلی برای مطلب ایجاد کنیم پس خواهیم داشت :

padding-right:10px;

پس مشخصه های خاندان!! padding عبارتند از :

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

 

مقداردهی به مشخصه padding

در مثال بالا ما از مقیاس پیکسل (px) برای مقداردهی استفاده کردیم ولی میتونیم از مقیاسهای em ، pt و حتی درصد (%) هم استفاده کنیم که در این حالت مقدار ما بر اساس صفحه نمایش کاربر تنظیم خواهد شد  . تنها نکته ای که باید توجه داشته باشید این هست که نباید از مقادیر منفی استفاده کنید و تنها مقادیر مثبت مورد استفاده قرار میگیرند.

 

margin یا حاشیه خارجی

از حاشیه خارجی برای ایجاد فضا بین دو عنصر مختلف در قالب استفاده میکنیم.برای مثال در یک قالب دو عنصر با نامهای “مطلب ۱” و “مطلب ۲” داریم که هرکدام از اینها margin برابر ۵ پیکسل دارند.

margin در css

پس فاصله مطلب ۱ از مطلب ۲ برابر با ۱۰ پیکسل خواهد بود. در تصویر بالا برای اینکه فضای اختصاص داده شده به margin رو متوجه بشید از رنگ استفاده کردیم ولی حقیقت این هست که مشخصه margin کاملا شفاف هست و هیچ رنگی رو دریافت نمیکنه.

سوال : فرق margin و padding در چیست؟

شاید این سوال برای شما مطرح شده باشه که چرا از margin استفاده کنیم ، خوب با همون padding فاصله این دو عنصر رو تعیین میکنیم ، در جواب باید عرض کنم که از padding برای ایجاد فاصله بین یک مطلب و خط مرزی همون مطلب استفاده میکنیم ولی از margin برای ایجاد فاصله بین خط مرزی یک مطلب با خط مرزی (border) مطلب یا باکس دیگر. امیدوارم منظورم رو متوجه شده باشید.

 

مقداردهی به margin

اختصاص مقدار به margin دقیقا مانند padding هست با این تفاوت که علاوه بر واحدهای ذکر شده برای padding (یعنی em , px , pt و %) میتونید از مقادیر auto و یا inherit هم استفاده کنید.

با استفاده از مقدار auto کار رو به مرورگر میسپارید تا مقدار فضا رو کنترل کنه و مقدار inherit هم مقدار حاشیه عناصر مادر رو بر روی عناصر زیرمجموعه تنظیم میکنه یعنی اگر شما دو باکس درون هم داشته باشید باکس اول باکس مادر محسوب میشه و باکسی که داخل اون هست باکس زیرمجموعه.

نکته دیگر هم این هست که شما میتوانید از اعداد منفی برای margin استفاده کنید :

margin-top: -10px;
margin-right:5%;
margin-bottom:auto;
margin-left:inherit;

با تمرین و مشاهده نمونه فایلهای css در سایتها و قالبهای مختلف میتونید این دو مشخصه رو به صورت کامل یادبگیرید ، دو مشخصه ای که برای طراحی صفحات وب بدون استفاده از جداول کاملا لازم و ضروری هستند و نیاز دارید درک صحیحی از اونها داشته باشید.

در اینجا سطح مقدماتی و پایه css تمام شد و از دروس آتی به مشخصه های پیشرفته خواهیم پرداخت که لازمه یادگیری اونها تسلط بر مطالب گفته شده در این سیزده درس خواهد بود.سعی میکنیم از دروس بعد (یعنی برای سطوح پیشرفته) درسها به صورت عملی و همراه با مثال و تمرین باشند تا به خوبی بتونید css رو یادبگیرید.

احتمالا این مطالب برای شما جالب هستند

آموزش css – درس بیست و یکم – انتخاب کردن عناصر از طریق صفت آنها
ساخت دکمه rollover با استفاده از فتوشاپ و css
آموزش css – درس شانزدهم – موقعیت دهی به عناصر (Positioning)
استایل‌بندی لینک و پیوندها در صفحات وب با css
css sprite چیست و چگونه استفاده میشود؟
آموزش css – درس هجدهم – کلاس کاذب (Pseudo Class)

گفتگو پیرامون مفهوم Padding و Margin و تفاوت‌های آن‌ها در CSS

(منتشر شده: 5 | در انتظار تایید: 0)
siavash-k

اقا خیلی عالی بود
آموزشای پیشرفته رو کی میزارین ؟

پاسخ دهید
azita

merc merc merc

پاسخ دهید
mahla

tanx . very usefullyyyyyyyyy.

پاسخ دهید
زی

ممنون از آموزشهایی که میدید
منتظر آموزشهای پیشرفته هستم

پاسخ دهید

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)