آموزش CSS - صفت Padding

          mahdi 
            بازدید : 56
          پنجشنبه 26 مرداد 1391
           نظرات (0)
        

صفت Padding

این صفت فضای بین کادرعنصر و محتوا را تعیین می کند .یک صفت تند نویس می باشد یعنی نیازی نیست حتما طرفین را با نوشتن به طور مثال padding-top مشخص کنید فقط کافیست همانند صفت margin اعداد خود را وارد کنید .
چند مثال میزنم تا بیشتر با این خاصیت آشنا بشوید .
lenght : اندازه حاشیه با یک مقدار ثابت تعیین می گردد.
% : اندازه حاشیه با درصدی از اندازه قالب تعیین می گردد.
اگر نخواهید از صفت تند نویس padding استفاده کنید می توانید دقیق مشخص نمایید که فاصله از چه طرفی اعمال شود به عنوان مثال فرض کنید می خواهید پاراگراف اول 20پیکسل از پاراگراف پایین یا دوم فاصله داشته باشد .
به این مثال توجه کنید هر 4 حالت را توضیح داده ام
از ویژگی float برای تعیین قرارگیری متن استفاده کرده ام .

.pic1
{
padding-bottom:50px;
}
.pic2
{
padding-left:50%;
float : left ;
}
.pic3
{
padding-right : 100px ;
}
.pic4
{
padding-top : 200px;
}

.left
{
float : left ;
}

مشاهده دمو

نیازی هم حتما نیست که 4 طرف را در فایل CSS با خاصیت هایی که در بالا توضیح داده ام مشخص کنید می توانید از خاصیت تند نویس استفاده کنید که فقط اعداد را روبروی صفت تایپ می کنید .
به مثال زیر توجه کنید .
هر 4 جهت را به صورت خلاصه وارد کردم دیگه نیازی نیست از خواص طرفین استفاده کنم .

padding:25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

padding : 25px 50px 75px;
top padding is 25px
right and left padding are 50px
bottom padding is 75px

padding : 25px 50px;
top and bottom padding are 25px
right and left padding are 50px

padding : 25px;
all four padding are 25px

منبع

ارسال نظر برای این مطلب