پدینگ در CSS (Padding)

«پدینگ (Padding)» فضای داخلیِ بین محتوای عنصر و کادر آن است. با ویژگی های پدینگ می توانید برای هر سمت فاصله بسازید و با کوتاه نویسی در یک اعلان تنظیمشان کنید.

پدینگ برای هر سمت

برای کنترل جداگانه چهار جهت از ویژگی های padding-top، padding-right، padding-bottom و padding-left استفاده کنید.

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

هشدار: مقدارهای منفی برای پدینگ مجاز نیست.

کوتاه نویسی پدینگ (Shorthand)

ویژگی padding می تواند 1 تا 4 مقدار بگیرد. ترتیب چهار مقداری به صورت بالا، راست، پایین، چپ است.

/* چهار مقدار */
div { padding: 25px 50px 75px 100px; }
/* سه مقدار: بالا، افقی، پایین */
div { padding: 25px 50px 75px; }
/* دو مقدار: عمودی، افقی */
div { padding: 25px 50px; }
/* یک مقدار: همه جهات */
div { padding: 25px; }

نکته: می توانید از واحدهای طولی یا درصد استفاده کنید. درصد بر اساس عرضِ والد محاسبه می شود.

پدینگ و عرض عنصر

ویژگی width عرض ناحیه محتوا را مشخص می کند. بنابراین افزودن پدینگ، عرض کلی عنصر را افزایش می دهد.

div { width: 300px; padding: 25px; /* عرض نهایی: 350px */ }

کنترل پدینگ با box-sizing

برای ثابت ماندن عرض کل، از box-sizing: border-box; استفاده کنید تا عرض شامل محتوا، پدینگ و کادر شود.

div { width: 300px; padding: 25px; box-sizing: border-box; /* عرض کل: 300px */ }

یادگیری مرتبط با پدینگ

برای تسلط بیشتر این بخش ها را ببینید: کادرها، عرض کادر و رنگ کادر. همچنین آشنایی با کوتاه نویسی کادر و حاشیه گرد مفید است.

پدینگ (padding) در MDN و توضیح box-sizing منابع مناسبی برای جزئیات هستند.