<percentage>

نوع داده ای <percentage> نشان دهنده درصد (%) می باشد. که می توان از آن برای مقادیر طولی استفاده کرد.

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

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

.dad {
  width: 400px;
}

.child {
  width: 50%; /* 50% * 400px = 200px */
}

اما اگر اندازه ویژگی line-height بصورت درصدی تعیین شود مقدار نهایی این ویژگی وابسته به ویژگی font-size خود عنصر است.

p { 
  font-size: 10px; 
  line-height: 120%; /* 120% * 10px = 12px */
}

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

مثال line-height بالا در نظر بگیرید, حال فرض کنید فرزندان عنصر p مقدار ویژگی line-height پدرشان را به ارث ببرند خواهیم داشت:

p {
  font-size: 10px;
  line-height: 120%; /* 120% * 10px = 12px */
}

p.childs {
  /* line-height =  12px */
}

در این مواقع همیشه مقدار درصد محاسبه می شود و نتیجه محاسبه شده به فرزند ارث می رسد.

نحوه محاسبه مقادیر درصدی و نکات مربوط به وراثت آنها را به مرور در ویژگی های مختلف فرا خواهید گرفت.