پدینگ در 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 منابع مناسبی برای جزئیات هستند.