padding-top

با استفاده از ویژگی padding-top می توان عرض فضای داخلی سمت بالای عنصر را تنظیم کرد.

قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.

به عنوان نمونه برای عنصری این ویژگی را برابر با 25 پیکسل قرار می دهیم:


div {
  padding-top: 25px;
}

نتیجه بصورت زیر خواهد بود:

padding-top

مقادیر ویژگی `padding-top`


padding-top: <length> | <percentage> | inherit

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.


padding-top: 100px;
padding-top: 4rem;
padding-top: 10vh;
padding-top: 100cm;

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

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به عرض نگهدارنده یا همان پدر عنصر تعیین می کند.


.dad {
  width: 100px;
}

.dad .boy {
  padding-top: 10%; /* 10px */
}

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