آموزش Padding در CSS

آموزش Padding

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

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

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

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

مقادیر ممکن

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

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

مثال:

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

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

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

مثال:

        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