پدینگ (Padding) در CSS

در این جلسه می‌خواهیم با مفهوم padding آشنا شویم و نکاتی را در این باره بیاموزیم. ویژگی padding فضای خالی در درون عنصر ایجاد می‌کند. در واقع پدینگ یعنی فضای بین محتوا و حاشیه ی عنصر. به زبان ساده اگر به یک عنصر پدینگ بدهیم آن عنصر از درون چاق می‌شود.

ما می‌توانیم این خصوصیت را برای هر طرف از عنصر که بخواهیم اعمال کنیم. برای این کار از دستورات زیر استفاده می‌کنیم:

• Padding-top :   px ;
• Padding-right :   px ;
• Padding-bottom :   px ;
• Padding-left :   px ;

برخی نکات مربوط به مباحث پدینگ و مارجین و بوردرها شبیه به هم هستند. از جمله اینکه می‌توانیم به هر طرف از عنصر این ویژگی‌ها را اعمال کنیم و همچنین از دستورات خلاصه شده استفاده کنیم. پس

padding : 20px 30px 40px 50px ;

این دستور از سمت بالا 20px ، از سمت راست 30px، از سمت پایین 40px و از سمت چپ 50px پدینگ ایجاد می‌کند.

Padding : 20px 30px 40px ;

و این دستور از سمت بالا 20px، از سمت راست و چپ 30px و از سمت پایین 40px پدینگ ایجاد می‌کند.

Padding : 20px 30px ;

و در این حالت هم از بالا و پایین 20px و از سمت راست و چپ 30px پدینگ ایجاد می‌شود. و همچنین اگر تنها یک مقدار به آن بدهیم به همان میزان از چهار طرف پدینگ ایجاد می‌شود.

نکته : padding‌ها نمی‌توانند مقادیر منفی را بگیرند و تنها مقادیر مثبت برای آن‌ها مجاز است.

فرض کنید عنصری را ایجاد کرده ایم و به آن عرض 300px داده ایم:

div{

background-color: blue;

width: 300px ;

}

حال از سمت راست  و چپ به آن padding می‌دهیم :

div{

background-color: blue;

width: 300px ;

padding : 0px  500px;

}

در این حالت مساله ای به وجود می‌آید. به خاطر وجود پدینگ، عرض عنصر ما از مقدار 300px بیشتر شده است. در صورتی که نباید این اتفاق بیفتد. پس برای حل این مساله چه باید کرد؟

با استفاده از دستور box-sizing می‌توانیم این مساله را به خوبی حل کنیم. به شکل زیر:

div{

background-color: blue;

width: 300px ;

padding-right: 500px;

box-sizing: border-box ;

}

در این صورت دیگر عرض عنصر به هم نمی‌خورد و در صورت نیاز محتوا کوچکتر می‌شود تا عرض حفظ شود.