021-20483015

صفت padding در CSS

این صفت برای تعریف فضای خالی به دور محتوای یک عنصر استفاده می شود. در واقع 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


مثال :

خلاصه نویسی padding
p {
    padding: 50px 30px 50px 80px;
}
مشاهده مثال


تشریح مثال بالا :

اگر صفت padding چهار مقدار داشته باشد ;padding: 50px 30px 50px 80px

فضای حاشیه بالا 50px
فضای حاشیه راست 30px
فضای حاشیه پایین 50px
فضای حاشیه چپ 80px
خواهد بود.


اگر صفت padding سه مقدار داشته باشد ;padding: 50px 30px 50px

فضای حاشیه بالا 50px
فضای حاشیه راست و چپ 30px
فضای حاشیه پایین 80px
فضای خواهد بود.

اگر صفت padding دو مقدار داشته باشد ;padding: 50px 30px  

فضای حاشیه بالا و پایین 50px
فضای حاشیه راست و چپ 30px

خواهد بود.

اگر صفت padding یک مقدار داشته باشد ;padding: 40px

فضای حاشیه هر چهار جهت 50px خواهد بود.


مثال :
خلاصه نویسی padding برای تمام جهات
div.ex1 {
    padding: 25px 50px 75px 100px;
}

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

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

div.ex4 {
    padding: 25px;
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط