این صفت برای تعریف فضای خالی به دور محتوای یک عنصر استفاده می شود. در واقع paddign یک فضای خالی مابین محتوا و خط حاشیه ایجاد می کند. با CSS و صفات موجود برای padding کنترل کامل بر فضای حاشیه خواهید داشت و می توانید برای هر چهار طرف عنصر فضای خالی تنظیم کنید.

 

padding برای هر طرف عنصر

در CSS برای تعریف فضای حاشیه برای هر طرف از عنصر ، صفتی وجود دارد :


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

صفات هر چهار طرف از فضای حاشیه عناصر می توانند مقادیر زیر را داشته باشند :

length - مقدار فضای حاشیه را بر حسب px ، pt و cm مشخص می کند.
% - فضای حاشیه را بر حسب درصدی از عرض محتوای عنصر تعیین می کند.
inherit - مشخص می کند که فضای حاشیه و مشخصات آن باید از عنصر مورد اشاره تبعیت کند.


در مثال زیر برای هر طرف از عنصر <p> مقدار فضای حاشیه متفاوتی تنظیم کرده ایم.

مثال :

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

خلاصه نویسی صفت  padding

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


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


مثال :

p {
    padding: 50px 30px 50px 80px;
}

div.ex1 {
    padding: 25px 50px 75px 100px;
}

div.ex2 {
    padding: 25px 50px 75px;
}

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}