akofaraji.ir
Padding ها در CSS
نوشته شده در تاریخ 08 فروردین 1403
نظرات: 0 امتیاز: 9 زمان مطالعه: 14 دقیقه
 
 
padding در CSS
 
 

padding چیست؟

 

خصوصیت padding در زبان CSS برای ایجاد فضای خالی بین محتوای درونی یک عنصر و محدوده اش (مانند حاشیه و …) استفاده می شود.

 

شما با استفاده از کدهای CSS بر تمام جوانب padding مسلط هستید از جمله:

  • padding-top (به معنای padding بالا)
  • padding-right (به معنای padding  سمت راست)
  • padding-bottom (به معنای padding پایین)
  • padding-left (به معنای padding سمت چپ)

 

برای مقداردهی به این خصوصیت ها می توانید از موارد زیر استفاده کنید:

  • مشخص کردن padding به صورت دقیق در واحد های px یا pt یا cm و …
  • مشخص کردن padding به درصدی از عرض عنصر پدر
  • مشخص کردن padding با کلیدواژه ی inherit. در این حالت مقدار padding از عنصر پدر به ارث برده می شود
 
نکته: برخلاف margin، مقادیر منفی مجاز نیستند.

 

سوال: تفاوت padding با Margin چیست؟

 

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

تصویر شماره 1: تفاوت Padding و Margin
تصویر شماره 1: تفاوت Padding و Margin

تصویر شماره 2: تفاوت Padding و Margin و Border
تصویر شماره 2: تفاوت Padding و Margin و Border

 

این دو تصویر تفاوت را به صورت واضح مشخص می کنند. اگر بخواهم خودمانی تر بگویم، می گویم margin برای فاصله با دیگر عناصر و padding برای چاق تر شدن خود عنصر است!

بیایید نگاهی به این مثال بیندازیم:

 

 

مشاهده ی خروجی در JSBin

 

در این مثال از هر چهار خصوصیت padding (مربوط به چهار جهت اصلی) استفاده کرده ایم و می بینید که در مقایسه با همین مثال که جلسه ی قبل برای Margin آوردیم، عنصر به جای فاصله گرفتن از گوشه های صفحه و دیگر عناصر از حاشیه های خودش فاصله گرفته و به قولی چاق تر شده است!

 

دستور خلاصه padding

 

برای خلاصه و کوتاه تر کردن کد، دستور خلاصه ای وجود دارد که به ما اجازه می دهد تمام این دستورات را یک جا بنویسیم و آن دستور padding است. به این صورت:

 

padding در قالب چهار مقدار مانند ;padding: 25px 50px 75px 100px 

  • padding بالا 25 پیکسل می باشد.
  • padding راست 50 پیکسل می باشد.
  • padding پایین 75 پیکسل می باشد.
  • padding چپ 100 پیکسل می باشد.

 

مثال:

 

مشاهده ی خروجی در JSBin

 

padding در قالب سه مقدار مانند ;padding: 25px 50px 75px 

  • padding بالا 25 پیکسل می باشد.
  • padding راست و چپ 50 پیکسل می باشد.
  • padding پایین 75 پیکسل می باشد.

 

مثال:

 

مشاهده ی خروجی در JSBin

 

padding در قالب دو مقدار مانند ;padding: 25px 50px 

  • padding بالا و پایین 25 پیکسل می باشد.
  • padding راست و چپ 50 پیکسل می باشد.

 

مثال:

 

مشاهده ی خروجی در JSBin

 

padding در قالب تک مقدار مانند ;padding: 25px 

  • تمام جهات دارای padding برابر با 25 پیکسل می باشند.

 

مثال:

 

مشاهده ی خروجی در JSBin

 

درگیری width و padding

 

به تصویر شماره 2 (بالاتر) نگاه کنید. به این تصویر Box Model می گوییم که مدلی است برای تعامل خصوصیت های مختلف عناصر در زبان های HTML و CSS. اگر به وسط این تصویر نگاه کنید متوجه می شوید که قسمتی به نام content وجود دارد. content در لغت به معنی محتوا است و جایی است که محتوای اصلی عنصر قرار می گیرد. به طور مثال در یک عنصر <p>، محتوای متنی همان content است و بقیه ی موارد مانند حاشیه ها و … محتوا محسوب نمی شوند.

 

از طرفی گفتیم که padding باعث چاق شدن عنصر می شود چرا که بین content و محدوده ی اطرافش (مانند حاشیه ها و …) فاصله می اندازد. اگر خوب فکر کنید متوجه می شوید که به مشکلی برخورده ایم! اگر padding عنصری را افزایش دهیم، width (عرض) آن عنصر نیز افزایش پیدا می کند!

 

بگذارید در قالب یک مثال برایتان بگویم. در کد زیر به عنصر <div> عرض 300 پیکسلی داده ایم اما خروجی ما عرض 350 پیکسلی دارد! چرا؟ به این دلیل که برای left padding مقدار 25 پیکسل و برای right padding نیز 25 پیکسل تعریف کرده ایم بنابراین:

25 + 25 +300 = 350

 

مشاهده ی خروجی در JSBin

 

حتما متوجه شده اید که اگر این رفتار از تمام عناصر سر بزند، طراحی یک صفحه ی وب به طور کامل زیر و رو خواهد شد!

 

سوال: این مشکل را چطور حل کنیم؟

پاسخ: در CSS خصوصیتی به نام box-sizing وجود دارد و باعث می شود عناصر عرض خود را ثابت نگه دارند. اگر از box-sizing استفاده کنید و سپس مقدار padding را افزایش دهید به جای زیاد شدن عرض، فضای content کمتر می شود. به این مثال توجه کنید:

 

مشاهده ی خروجی در JSBin

 

در مثال بالا دو نوع <div> را قرار داده ایم که یکی دارای خاصیت box-sizing است اما دیگر چنین خاصیتی را ندارد. به راحتی می توان تفاوت ایجاد شده را مشاهده کرد.

 

نکته: حالا که صحبت از width و height شده است باید بگویم که دستوراتی به نام max-width و max-height نیز موجود اند. کار این دستورات این است که به جای تعیین یک مقدار مشخص (مثلا 200 پیکسل برای عرض)، حداکثر مقدار مجاز را تعیین می کنند!
 

به طور مثال اگر گفتیم max-width یک عنصر 200 پیکسل است یعنی اگر پنجره ی مرورگر کوچک تر از این مقدار بود، عنصر هم کوچکتر می شود و با بزرگتر شدن پنجره، عنصر نیز بزرگتر می شود و این مسئله تا جایی ادامه پیدا می کند که به 200 پیکسل برسد. سپس دیگر تغییری نخواهیم دید (هرچقدر هم که پنجره مرورگر بزرگ شود).

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید