شما با استفاده از کدهای CSS بر تمام جوانب padding مسلط هستید از جمله:
padding-top(به معنای padding بالا)padding-right(به معنای padding سمت راست)padding-bottom(به معنای padding پایین)padding-left(به معنای padding سمت چپ)
برای مقداردهی به این خصوصیت ها می توانید از موارد زیر استفاده کنید:
- مشخص کردن padding به صورت دقیق در واحد های px یا pt یا cm و …
- مشخص کردن padding به درصدی از عرض عنصر پدر
- مشخص کردن padding با کلیدواژه ی inherit. در این حالت مقدار padding از عنصر پدر به ارث برده می شود
سوال: تفاوت padding با Margin چیست؟
پاسخ: هر دو فضای خالی ایجاد می کنند اما Margin این فضای خالی را بین عنصر و عناصر دیگر (خارج از هر نوع محدوده ای که عنصر داشته باشد؛ مثل حاشیه ها) اضافه کرده در حالی که Padding این فضای خالی را بین محتوای داخلی عنصر و هر نوع محدوده ای که دارد (مثل حاشیه ها) اضافه می کند. به دو تصویر زیر نگاه کنید:
تصویر شماره 1: تفاوت Padding و Margin
تصویر شماره 2: تفاوت Padding و Margin و Border
این دو تصویر تفاوت را به صورت واضح مشخص می کنند. اگر بخواهم خودمانی تر بگویم، می گویم margin برای فاصله با دیگر عناصر و padding برای چاق تر شدن خود عنصر است!
بیایید نگاهی به این مثال بیندازیم:
در این مثال از هر چهار خصوصیت padding (مربوط به چهار جهت اصلی) استفاده کرده ایم و می بینید که در مقایسه با همین مثال که جلسه ی قبل برای Margin آوردیم، عنصر به جای فاصله گرفتن از گوشه های صفحه و دیگر عناصر از حاشیه های خودش فاصله گرفته و به قولی چاق تر شده است!
دستور خلاصه padding
برای خلاصه و کوتاه تر کردن کد، دستور خلاصه ای وجود دارد که به ما اجازه می دهد تمام این دستورات را یک جا بنویسیم و آن دستور padding است. به این صورت:
padding در قالب چهار مقدار مانند ;padding: 25px 50px 75px 100px
- padding بالا 25 پیکسل می باشد.
- padding راست 50 پیکسل می باشد.
- padding پایین 75 پیکسل می باشد.
- padding چپ 100 پیکسل می باشد.
مثال: