<percentage>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS тип данных <percentage> представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width, height, margin, padding, и font-size.

Примечание: Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных <length>) будет доступно в унаследованном свойстве, а не значение в процентах.

Синтаксис

Тип данных <percentage> состоит из <number>, за которым следует знак процента (%). Так же впереди может стоять знак + или -, хотя отрицательные значения допустимы не во всех свойствах. Как и у всех единиц измерения CSS между символом процента и числом нет пробельного символа.

Интерполяция

При анимировании значения типа данных <percentage> интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.

Примеры

Ширина и левый отступ

html
<div style="background-color:blue;">
  <div style="width:50%; margin-left:20%; background-color:lime;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>

HTML код выше будет выглядеть так:

Размер шрифта

html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>

HTML код выше будет выглядеть так:

Спецификации

Specification
CSS Values and Units Module Level 4
# percentages

Совместимость с браузерами

BCD tables only load in the browser