padding در css

padding در css به فضایی در اطراف محتوای المان گفته می شود که درون border در نظر گرفته می شود. در شکل زیر padding به اندازه ۷۰px در اطراف محتوای المان دیده می شود:

با استفاده از سی اس اس، شما به راحتی می توانید اندازه پدینگ را تعیین کنید.

padding در جهات مختلف

شما می توانید پدینگ را برای هر ۴ طرف المان تعریف کنید:

• padding-top
• padding-right
• padding-bottom
• padding-left

مقدار پدینگ را به روش های زیر می توان تعیین کرد:

length: مقدار padding را با مقیاس px، pt،cm و … تعیین می کنیم.

%: مقدار پدینگ را درصدی از عرض المان والد در نظر می گیریم.

inherit: تعیین می کند که پدینگ، از المان والد به ارث می رود.

نکته: مقادیر منفی پذیرفته نیست.

در مثال زیر مقادیر متفاوتی به هر یک از جهات المان div داده شده است:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

مختصر نویسی padding در css

می توانیم پدینگ هر ۴ جهت را در یک خصوصیت مشخص کرد و ترتیب پدینگ ها به صورت زیر است:

• padding-top
• padding-right
• padding-bottom
• padding-left

که در این صورت یکی از حالت های زیر را داریم:

۱) اگر پدینگ ۴ مقدار داشته باشد:

margin: 25px 50px 75px 100px;

padding بالا: ۲۵ پیکسل
padding راست: ۵۰ پیکسل
padding پایین: ۷۵ پیکسل
padding چپ: ۱۰۰ پیکسل

۲) اگر پدینگ سه مقدار داشته باشد:

margin: 25px 50px 75px;

padding بالا: ۲۵ پیکسل
padding راست: ۵۰ پیکسل
padding پایین: ۷۵ پیکسل

۳) اگر پدینگ دو مقدار داشته باشد:

margin: 25px 50px;

padding بالا و پایین: ۲۵ پیکسل
padding راست و چپ: ۵۰ پیکسل

۴) اگر پدینگ یک مقدار داشته باشد:

margin: 25px;

در تمامی جهات padding برابر ۲۵ پیکسل خواهیم داشت.

padding در css و عرض المان

width در css، عرض المان محتوا را مشخص می کند. المان محتوا، بخشی در بین border, margin و padding است.

بنابراین اگر عرض المان مشخص شده باشد، با اضافه کردن پدینگ، عرض کلی المان افزایش می یابد و در اکثر مواقع، این چیزی نیست که ما می خواهیم.

در مثال زیر، عرض المان div برابر ۳۰۰px تعیین شده است این در حالی است که عرض واقعی المان ۳۵۰px محاسبه می شود. (با احتساب ۲۵ پیکسل پدینگ چپ و ۲۵ پیکسل پدینگ راست)

div {
  width: 300px;
  padding: 25px;
}

اگر بخواهیم که این عرض همان ۳۰۰ پیکسل باقی بماند، کافیست از خصوصیت box-sizing استفاده کنیم.

این خصوصیت باعث می شود که عرض کلی المان ثابت باقی بماند؛ اگر عرض padding زیاد شود، عرض المان محتوا که در مثال زیر متن است، کاهش می یابد:

div {
  width: 300px;
  padding: 50px;
  box-sizing: border-box;
}

برگرفته از وب سایت w3schools