`<percentage>` тип CSS

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

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

Синтаксис

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

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

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

Примеры

Ширина и margin-left

<div class="container">
  <div class="box1">Width: 50%, Left margin: 20%</div>
  <div class="box2">Width: 30%, Left margin: 60%</div>
</div>

.container {
  background-color: navy;
}

.box1 {
  width: 50%;
  margin-left: 20%;
  background-color: chartreuse;
}

.box2 {
  width: 30%;
  margin-left: 60%;
  background-color: pink;
}

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

<div class="container">
  <p>Full-size text (18px)</p>
  <p><span class="half">50% (9px)</span></p>
  <p><span class="double">200% (36px)</span></p>
</div>

.container {
  font-size: 18px;
}

.half {
  font-size: 50%;
}

.double {
  font-size: 200%;
}

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

Спецификация
Модуль CSS Values and Units, уровень 4 # проценты

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`percentage`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4	1

См. также

<length-percentage>
модуль значений и единиц CSS

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/percentage