1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
---
title: <length>
slug: Web/CSS/length
tags:
- CSS
- CSS Тип Данных
- Величина
- Разметка
- длина
translation_of: Web/CSS/length
original_slug: Web/CSS/размер
---
<div>{{CSSRef}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <code><length></code> представляет единицу длины. Длина может быть использована в таких свойствах CSS как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, и {{Cssxref("text-shadow")}}.</p>
<div class="note">
<p><strong>Обратите внимание:</strong> Хоть значения {{cssxref("<percentage>")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <code><length></code>, они не являются <code><length> </code>значениями.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<p>Тип данных <code><length></code> состоит из {{cssxref("<number>")}}, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа <code>0</code> единица измерения необязательна.</p>
<div class="note">
<p><strong>Обратите внимание:</strong> Некоторые свойства допускают использование отрицательных значений <code><length></code>, а некоторые нет.</p>
</div>
<h3 id="Единицы_измерения">Единицы измерения</h3>
<h4 id="Относительные_единицы_измерения">Относительные единицы измерения</h4>
<p>Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, <a href="/ru/docs/Web/CSS/line-height">высота строки</a> или размер {{glossary("viewport")}}.</p>
<h5 id="Единицы_зависящие_от_шрифта">Единицы, зависящие от шрифта</h5>
<p>Единицы, зависящие от шрифта, определяют значение <code><length></code>, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.</p>
<div class="note">
<p><strong>Обратите внимание:</strong> Эти единицы, особенно <code>em</code> и <code>rem</code>, часто используются для создания адаптивных разметок, которые сохраняют <a href="https://24ways.org/2006/compose-to-a-vertical-rhythm">вертикальную структуру страницы</a> даже если пользователь изменяет размер шрифта.</p>
</div>
<dl>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cap</span></font> {{experimental_inline}}</dt>
<dd>Представляет высоту заглавных букв в <a href="/ru/docs/Web/CSS/font">шрифте</a>, применённом к элементу.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ch</span></font></dt>
<dd>Представляет ширину символа "<code>0</code>" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">em</span></font></dt>
<dd>Представляет подсчитанный размер шрифта элемента. Если используется в свойстве {{Cssxref("font-size")}}, представляет <em>унаследованный</em> размер шрифта.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ex</span></font></dt>
<dd>Представляет <a href="https://en.wikipedia.org/wiki/X-height">x-height</a> (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах <code>1ex ≈ 0.5em</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt>
<dd>Равна используемой в шрифте ширине символа "<code>水</code>" (ККЯ, символ "вода", U+6C34).</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lh</span></font> {{experimental_inline}}</dt>
<dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}}, переведённому в абсолютные единицы измерения.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rem</span></font></dt>
<dd>Представляет размер шрифта корневого элемента (обычно {{HTMLElement("html")}}). Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию (в большинстве браузеров <code>16px</code>, но настройки пользователя могут переопределить это значение).</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rlh</span></font> {{experimental_inline}}</dt>
<dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого элемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.</dd>
</dl>
<h5 id="Единицы_зависящие_от_размеров_экрана">Единицы, зависящие от размеров экрана</h5>
<p>Эти единицы определяют значение <code><length></code> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках {{cssxref("@page")}}.</p>
<dl>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vh</span></font></dt>
<dd>Равна 1% высоты блока содержимого.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vw</span></font></dt>
<dd>Равна 1% ширины блока содержимого.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vi</span></font> {{experimental_inline}}</dt>
<dd>Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vb</span></font> {{experimental_inline}}</dt>
<dd>Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmin</span></font></dt>
<dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них меньше.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmax</span></font></dt>
<dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них больше.</dd>
</dl>
<h4 id="Абсолютные_единицы_измерения">Абсолютные единицы измерения</h4>
<p>Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойства устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.</p>
<p>Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения <code>px</code> представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, <code>1in</code> определяется как <code>96px</code>, что равно <code>72pt</code>. Последствием такого способа определения является то, что длины, описанные в дюймах (<code>in</code>), сантиметрах (<code>cm</code>) или миллиметрах (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font>) необязательно равны одноимённым физическим единицам.</p>
<p>Для устройств с высоким dpi дюймы (<code>in</code>),сантиметры (<code>cm</code>) и миллиметры (<code>mm</code>) такие же, как и соответствующие физические единицы. Таким образов, единица <code>px</code> определяется относительно их (1/96 одного дюйма).</p>
<div class="note">
<p><strong>Обратите внимание:</strong> Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как <code>em</code> или <code>rem</code>) в свойстве <code>font-size</code>.</p>
</div>
<dl>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">px</span></font></dt>
<dd>Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на <em>принтерах</em> и <em>экранах с высоким разрешением</em> один пиксель CSS равен нескольким пикселям дисплея. <code>1px</code> = 1/96 от <code>1in</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cm</span></font></dt>
<dd>Один сантиметр. <code>1cm</code> = <code>96px/2.54</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font></dt>
<dd>Один миллиметр. <code>1mm</code> = 1/10 от <code>1cm</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Q</span></font> {{experimental_inline}}</dt>
<dd>Четверть миллиметра. <code>1Q</code> = 1/40 от <code>1cm</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">in</span></font></dt>
<dd>Один дюйм. <code>1in</code> = <code>2.54cm</code> = <code>96px</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pc</span></font></dt>
<dd>Одна <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D0%B9%D0%BA%D0%B0_(%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)">пайка</a>. <code>1pc</code> = <code>12pt</code> = 1/6 от <code>1in</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pt</span></font></dt>
<dd>Одна точка. <code>1pt</code> = 1/72 от<code>1in</code>.</dd>
<dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mozmm</span></font> {{non-standard_inline}}, удалена в Firefox 59</dt>
<dd>Экспериментальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.</dd>
</dl>
<h2 id="Интерполяция">Интерполяция</h2>
<p>При анимации значения <code><length></code> интерполируются как реальные <a href="https://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D1%81_%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%B7%D0%B0%D0%BF%D1%8F%D1%82%D0%BE%D0%B9">числа с плавающей запятой</a>. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется <a href="/ru/docs/Web/CSS/single-transition-timing-function">временной функцией</a> анимации.</p>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("css.types.length")}}</p>
|
