پدینگ المان ها در CSS – ویژگی padding

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

ویژگی padding، یک ویژگی خلاصه برای چهار ویژگی padding-top, padding-right, padding-bottom و padding-left است که هرکدام از آن‌ها برای تعیین پدینگ یکی از لبه های بالا، راست، پایین و چپ المان به کار می‌روند. در واقع برای تعیین همزمان فضاهای خالی پیرامون محتوای المان ها داخل بردر می‌توانید از ویژگی padding کمک بگیرید.

نحوه تعیین پدینگ یا لفاف پیرامون محتوای المان با کمک ویژگی padding در CSS

برای تعیین همزمان پدینگ برای المان ها در CSS کافیست مشابه با نمونه زیر مقدار مناسبی برای ویژگی padding مشخص کنید:

span {
  padding: 10px;
  border: 3px solid red;
  background-color: #6666da;
}

مقدار 10px برای این ویژگی در قانون CSS فوق باعث می‌شود به اندازه 10 پیکسل بین محتوای پیرامون المان‌های <span> و خط مرزی آن‌ها فاصله ایجاد شود. مقدار 3px solid red برای ویژگی border نیز باعث می‌شود چهار خط مرزی پیرامون المان‌های <span> با پهنای 3 پیکسل، به صورت یکپارچه و با رنگ قرمز رسم شود. رنگ زمینه المان نیز با کد هگز #6666da برای ویژگی background-color مشخص شده است.

در تصویر زیر می‌توانید نتیجه قانون فوق را روی یک المان <span> شامل واژه This مشاهده کنید:

برای ویژگی padding در CSS می‌توانید یک، دو، سه یا چهار مقدار از میان مقادیر مجاز برای پدینگ مشخص کنید:

• وقتی فقط یک مقدار برای این ویژگی مشخص شود، هر چهار لبه دارای پدینگ یکسان برابر با مقدار تعیین شده خواهند بود.
• وقتی دو مقدار برای این ویژگی مشخص شود مقدار اول، پدینگ بالا و پایین و مقدار دوم، پدینگ راست و چپ را مشخص می‌کند.
• وقتی سه مقدار برای این ویژگی مشخص شود مقدار اول پدینگ بالا، مقدار دوم پدینگ راست و چپ و مقدار سوم پدینگ پایین را مشخص می‌کند.
• وقتی چهار مقدار برای این ویژگی مشخص شود مقدار اول پدینگ بالا، مقدار دوم پدینگ راست، مقدار سوم پدینگ پایین و مقدار چهارم پدینگ چپ را مشخص می‌کند (برای به خاطر سپردن آسان‌تر، ترتیب مقادیر را به شکل ساعتگرد از لبه بالا شروع کنید).

مقادیر متداول قابل استفاده برای ویژگی padding

برای ویژگی padding در CSS می‌توانید از مقادیر متداول زیر استفاده کنید:

• طول: درج مقدار همراه با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت)، em و … برای این ویژگی، یکی از روش‌های رایج برای تعیین میزان پدینگ است. برای مثال مقدار 5px و 2em.
• درصد: درج مقدار برحسب درصد برای ویژگی padding، پدینگ المان را به صورت درصدی از پهنای بلوکی که المان را دربرگرفته مشخص می‌کند. برای مثال مقدار 50%.

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

نکته 2: به طور مشابه از مقادیر مجاز فوق می‌توانید برای تعیین پدینگ یکی از لبه ها استفاده کنید. کافیست مقدار موردنظر را به یکی از ویژگی‌های padding-top, padding-right, padding-bottom و padding-left اختصاص دهید.

نکته 3: به صورت پیشفرض، مقدار ویژگی width پهنای بخش محتوای المان را مشخص می‌کند. اما اگر ویژگی box-sizing روی border-box تنظیم شده باشد این مقدار padding و border المان را هم شامل می‌شود.

چند مثال تکمیلی برای تعیین پدینگ یا فاصله پیرامون محتوای المان در CSS

مثال زیر نمونه‌ای از تعیین پدینگ یا padding المان در CSS با کمک دو مقدار را نمایش می‌دهد:

span {
  padding: 0 10px;
  border: 3px solid red;
  background-color: #6666da;
}

به این ترتیب لبه های بالا و پایین المان‌های <span> بدون پدینگ و پدینگ های راست و چپ برابر با 10 پیکسل خواهد بود:

مثال زیر هم نمونه‌ای سه مقداری برای این ویژگی را نمایش می‌دهد:

span {
  padding: 0 10px 5%;
  border: 3px solid red;
  background-color: #6666da;
}

با توجه به سه مقدار فوق برای ویژگی padding، لبه بالایی المان‌های <span> بدون پدینگ، لبه های راست و چپ با پدینگ 10 پیکسل و لبه پایینی نیز با پدینگی برابر 5 درصد پهنای المان دربرگیرنده‌اش خواهد بود:

در مثال زیر نیز چهار مقدار برای این ویژگی درج شده است:

span {
  padding: 0 10px 5% 0;
  border: 3px solid red;
  background-color: #6666da;
}

با توجه به چهار مقدار فوق برای ویژگی padding، لبه بالایی المان‌های <span> بدون پدینگ، لبه راست با پدینگ 10 پیکسل، لبه پایین با پدینگی برابر 5 درصد پهنای المان دربرگیرنده‌اش و لبه چپ نیز بدون پدینگ خواهند بود:

بازگشت به فهرست مجموعه آموزشی CSS