آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Padding در CSS

دوره های مرتبط با این مقاله

آموزش Padding

خاصیت padding در CSS, فاصله ی بین خطوط حاشیه ی عنصر و محتوای عنصر را تعریف می کند (در واقع با استفاده از خاصیت ذکر شده می توان فاصله ی بین خط حاشیه border و محتوای داخل عنصر مربوطه را تنظیم کرد) .

Padding (فاصله / حاشیه ی درونی عناصر)

Paddingناحیه ی پیرامون محتوای یک المان را دربر می گیرد. توجه داشته باشید که حاشیه ی درونی عناصر تحت تاثیر رنگ پس زمینه قرار می گیرد .

Paddingهر چهار جهت بالا, پایین, چپ و راست را می توان به صورت جداگانه به وسیله ی خواص (property) مجزا تنظیم کرد یا تغییر داد . همچنین می توان با بهره گیری از خاصیت مختصر نویسی (shorthand property), حاشیه ی درونی عناصر (padding) هر چهار جهت را یکجا تنظیم کرد .

مقادیر ممکن

شرح
مقدار
فاصله ی درونی عنصر / padding را می توان بر حسب واحدی همچون px, pt, em و غیره تعیین کرد
Length
به میزان درصد تعریف شده فاصله ی درونی عنصر را تعیین کرد
%

تنظیم فاصله ی درونی عنصر به صورت تکی برای هر جهت :

در CSS این امکان وجود دارد که فاصله ی درونی چهار جهت را به صورت تکی یا مجزا مقدار دهی کرد (برای هر طرف padding متفاوتی تنظیم کرد) :

آموزش Css مثال:

نمونه یک

        p {
            padding-top: 25px;
            padding-right: 50px;
            padding-bottom: 25px;
            padding-left: 50px;
        }
امتحان کنید

تعيين با استفاده از خاصيت چند مقداری padding :

به منظور بهینه سازی کدنویسی و کاهش مقدار کدی که می نویسیم می توان خاصیت padding (میزان فاصله ی دور عنصر) هر چهار جهت را در یک تعریف مقداردهی و تنظیم کرد . همان طور که پیش تر نیز ذکر شد به این روش مقداردهی shorthand property یا خاصیت مختصر نویسی می گویند (که می توان آن را خاصیت چند مقداری نیز نامید) .

آموزش Css مثال:

نمونه دو

        p {
            padding: 25px 50px;
        }
امتحان کنید

خاصیت padding می تواند از یک تا چهار مقدار داشته باشد :

padding: 25px 50px 75px 100px;
                top padding = 25px
                right padding = 50px
                bottom padding = 75px
                left padding = 100px
                        
padding: 25px 50px 75px;
                top padding = 25px
                right and left paddings = 50px
                bottom padding = 75px
                        
padding: 25px 50px;
                top and bottom paddings = 25px
                right and left paddings = 50px
                        
padding: 25px;
                all four paddings = 25px 
                        
شرح
خاصیت
کلیه ی خاصیت های padding در هر چهار جهت را با بهره گیری از خاصیت shorthand در تنها یک تعریف مقدار دهی می کند
Padding سمت پایین را تنظیم می کند
padding سمت چپ را مقداردهی می کند
padding سمت راست یک عنصر را تنظیم و مقدار دهی می کند
حاشیه درونی عنصر را در سمت بالا تنظیم می کند
  • 4300
  •    2474
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .