freeCodeCamp/guide/russian/css/units/index.md

---
title: Units
localeTitle: Единицы измерения
---
## Единицы измерения

Многие свойства CSS, такие как `width` , `margin` , `padding` , `font-size` и т.д., определяют размеры. У CSS есть способ выразить длину в нескольких единицах. Длина представляет собой комбинацию числа и единицы без пробелов. Например, `5px` , `0.9em` и т. Д.

### Длина

#### Единицы общей длины

Для выражения длины используется CSS. Более старыми, поддерживаемыми всеми браузерами, являются:

*   **rem** - «r» означает «root»: «root em» -, который равен размеру шрифта, закрепленному на корневом элементе (почти всегда `<html>` ).
*   **vh** и **vw** - Многие техники отзывчивого веб-дизайна в значительной степени зависят от процентных правил. Тем не менее, процентные меры CSS не всегда являются лучшим решением для всех проблем. Мера **vh** равна 1/100 высоты окна просмотра. Так, например, если высота браузера равна 800px, 1vh равно 8px, и, аналогично, если ширина окна просмотра равна 650px, то 1vw эквивалентно 6.5px.
*   **vmin** и **vmax.** Эти единицы связаны с максимальным или минимальным значением **vh** и **vw** . Например, если браузер был установлен на 1200px в ширину, а высота 600px, 1vmin будет 6px и 1vmax будет 12px. Однако, если ширина была установлена равной 700px, а высота установлена равной 1080px, vmin будет равен 7px и vmax 10.8px.
*   **ex** и **ch** - эти единицы, аналогичные **em** и **rem** , полагаются на текущий шрифт и размер шрифта. Однако, в отличие от **em** и **rem** , эти единицы также полагаются на `font-family` поскольку они определяются на основе мер, специфичных для каждого шрифта. Блок **ch** («единица символа») определяется как ширина нулевого символа («0»). Единица **ex** определяется как «текущая x-высота текущего шрифта или половина 1em». Высота-x данного шрифта - это высота строчного «x» этого шрифта. Это часто средняя отметка шрифта.

| Unit          | Description             |
|---------------|-----------------------|
|em             |1 em - вычисленное значение размера шрифта для элемента, на котором он используется.	|
|ex             |1 ex - текущая высота x шрифта. Обычно x-height (но не всегда, например, если в шрифте нет «x»), равном высоте строчки «x»	|
|ch             |1 ch - это ширина глифа «0» (нуль) в текущем шрифте. «ch» означает знак (character).	|
|rem            |1 rem - вычисленное значение свойства font-size для корневого элемента документа.|
|vw             |1vw составляет 1% от ширины окна просмотра. «vw» означает «ширина окна просмотра».	|
|vh             |1vh - 1% высоты окна просмотра. «vh» означает «высота окна просмотра».	|
|vmin           |равняется меньшему из «vw» или «vh»	|
|vmax           |равняется большему из «vw» или «vh»	|

Существует два общих типа единиц, используемых для длины и размера в CSS: относительный и абсолютный.

### Относительные единицы
- ```em```
  - Ширина заглавной буквы M ```font-size``` текущего элемента.
  - Размер шрифта наследуется от родительских элементов.
  - Пример: 
  ```html
  div {
    font-size: 16px;
  }
  div h3 {
    font-size: 2rem;
  }
  ``` 
  Здесь ```<h3>``` будет равняться ```32px``` так как ```font-size``` текущего или родительского элемента равен ```16px```.
- ```rem```
  - `em` корневого элемента или ширина прописной буквы M базового ```font-size``` по умолчанию.
  - Размер шрифта родителя не будет иметь эффекта.
  - Пример: 
  ```html
  body {
    font-size: 16px;
  }
  p {
    font-size: 1.5rem;
  }
  ``` 
  Здесь ```<p>``` будет равняться ```24px``` так как основной ```font-size``` по умолчанию - ```16px```.
- ```%``` 
  - размер в процентах относительно размера родителя.
  - Пример: 
  ```html
  div {
    width: 400px;
  }
  div p {
    width: 75%;
  }
  ``` 
   Поскольку ширина родителя составляет ```400px``` , ширина внутреннего картографа будет ```300px``` или 75% от ```400px```.
- ```vw/vh```
  - ширина/высота экрана просмотра
  - Пример: 
  ```html
  body {
    width: 100vw;
  }
  ``` 
  ```body``` заполняет всю ширину окна просмотра, будь то 417px, 690px или любое дрегое значение.

### Абсолютные единицы
Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Вот некоторые абсолютные единицы:
- ```px```
  - пиксель
  - количество пикселей зависит от качества экрана устройства просмотра
- ```in```, ```cm```, ```mm```
  - дюйм, сантиметр, мм
  - Дюйм остается дюймом на экране любого размера.
- ```pt```, ```pc```
  - точки (1/72 дюйма) и пики (12 точек)
Пример
```html

p { 
  font-size: 24px; 
 } 
 div { 
  width: 3in; 
  border-width: 3pt; 
 } 
```
Абзац с ```font-size: 24px``` будет отображаться как 24px на экране телефона, планшета или рабочего стола.

```div``` будет отображаться как 3 дюйма в ширину, а ```border``` на ```div``` будет иметь толщину 3/72 дюйма, независимо от размера экрана.

### Дополнительная информация:

*   [WebPlatforms. Общие сведения о пикселях и других единицах CSS](https://webplatform.github.io/docs/tutorials/understanding-css-units/)
*   [MDN Web Docs - Единицы CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
*   [Учебники по веб-дизайну]('https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573)
*   [Справка HTML по CSS-единицам](http://www.htmlhelp.com/reference/css/units.html)
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
+								---
 								title: Units
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								localeTitle: Единицы измерения
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
+								---
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								## Единицы измерения
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								Многие свойства CSS, такие как `width` , `margin` , `padding` , `font-size` и т.д., определяют размеры. У CSS есть способ выразить длину в нескольких единицах. Длина представляет собой комбинацию числа и единицы без пробелов. Например, `5px` , `0.9em` и т. Д.
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								### Длина
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
 								#### Единицы общей длины
 								Для выражения длины используется CSS. Более старыми, поддерживаемыми всеми браузерами, являются:
 								*   **rem** - «r» означает «root»: «root em» -, который равен размеру шрифта, закрепленному на корневом элементе (почти всегда `<html>` ).
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								*   **vh** и **vw** - Многие техники отзывчивого веб-дизайна в значительной степени зависят от процентных правил. Тем не менее, процентные меры CSS не всегда являются лучшим решением для всех проблем. Мера **vh** равна 1/100 высоты окна просмотра. Так, например, если высота браузера равна 800px, 1vh равно 8px, и, аналогично, если ширина окна просмотра равна 650px, то 1vw эквивалентно 6.5px.
 								*   **vmin** и **vmax.** Эти единицы связаны с максимальным или минимальным значением **vh** и **vw** . Например, если браузер был установлен на 1200px в ширину, а высота 600px, 1vmin будет 6px и 1vmax будет 12px. Однако, если ширина была установлена равной 700px, а высота установлена равной 1080px, vmin будет равен 7px и vmax 10.8px.
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
+								*   **ex** и **ch** - эти единицы, аналогичные **em** и **rem** , полагаются на текущий шрифт и размер шрифта. Однако, в отличие от **em** и **rem** , эти единицы также полагаются на `font-family` поскольку они определяются на основе мер, специфичных для каждого шрифта. Блок **ch** («единица символа») определяется как ширина нулевого символа («0»). Единица **ex** определяется как «текущая x-высота текущего шрифта или половина 1em». Высота-x данного шрифта - это высота строчного «x» этого шрифта. Это часто средняя отметка шрифта.
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								| Unit          | Description             |
 								|---------------|-----------------------|
 								|em             |1 em - вычисленное значение размера шрифта для элемента, на котором он используется.	|
 								|ex             |1 ex - текущая высота x шрифта. Обычно x-height (но не всегда, например, если в шрифте нет «x»), равном высоте строчки «x»	|
 								|ch             |1 ch - это ширина глифа «0» (нуль) в текущем шрифте. «ch» означает знак (character).	|
 								|rem            |1 rem - вычисленное значение свойства font-size для корневого элемента документа.|
 								|vw             |1vw составляет 1% от ширины окна просмотра. «vw» означает «ширина окна просмотра».	|
 								|vh             |1vh - 1% высоты окна просмотра. «vh» означает «высота окна просмотра».	|
 								|vmin           |равняется меньшему из «vw» или «vh»	|
 								|vmax           |равняется большему из «vw» или «vh»	|
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
 								Существует два общих типа единиц, используемых для длины и размера в CSS: относительный и абсолютный.
 								### Относительные единицы
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								- ```em```
 								  - Ширина заглавной буквы M ```font-size``` текущего элемента.
 								  - Размер шрифта наследуется от родительских элементов.
 								  - Пример:
 								  ```html
 								  div {
 								    font-size: 16px;
 								  }
 								  div h3 {
 								    font-size: 2rem;
 								  }
 								  ```
 								  Здесь ```<h3>``` будет равняться ```32px``` так как ```font-size``` текущего или родительского элемента равен ```16px```.
 								- ```rem```
 								  - `em` корневого элемента или ширина прописной буквы M базового ```font-size``` по умолчанию.
 								  - Размер шрифта родителя не будет иметь эффекта.
 								  - Пример:
 								  ```html
 								  body {
 								    font-size: 16px;
 								  }
 								  p {
 								    font-size: 1.5rem;
 								  }
 								  ```
 								  Здесь ```<p>``` будет равняться ```24px``` так как основной ```font-size``` по умолчанию - ```16px```.
 								- ```%```
 								  - размер в процентах относительно размера родителя.
 								  - Пример:
 								  ```html
 								  div {
 								    width: 400px;
 								  }
 								  div p {
 								    width: 75%;
 								  }
 								  ```
 								   Поскольку ширина родителя составляет ```400px``` , ширина внутреннего картографа будет ```300px``` или 75% от ```400px```.
 								- ```vw/vh```
 								  - ширина/высота экрана просмотра
 								  - Пример:
 								  ```html
 								  body {
 								    width: 100vw;
 								  }
 								  ```
 								  ```body``` заполняет всю ширину окна просмотра, будь то 417px, 690px или любое дрегое значение.
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
 								### Абсолютные единицы
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Вот некоторые абсолютные единицы:
 								- ```px```
 								  - пиксель
 								  - количество пикселей зависит от качества экрана устройства просмотра
 								- ```in```, ```cm```, ```mm```
 								  - дюйм, сантиметр, мм
 								  - Дюйм остается дюймом на экране любого размера.
 								- ```pt```, ```pc```
 								  - точки (1/72 дюйма) и пики (12 точек)
 								Пример
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
+								```html
 								p {
 								  font-size: 24px;
 								 }
 								 div {
 								  width: 3in;
 								  border-width: 3pt;
 								 }
 								```
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								Абзац с ```font-size: 24px``` будет отображаться как 24px на экране телефона, планшета или рабочего стола.
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								```div``` будет отображаться как 3 дюйма в ширину, а ```border``` на ```div``` будет иметь толщину 3/72 дюйма, независимо от размера экрана.
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
 								### Дополнительная информация:
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								*   [WebPlatforms. Общие сведения о пикселях и других единицах CSS](https://webplatform.github.io/docs/tutorials/understanding-css-units/)
-												feat: add Russian guide

											
										
										
											2018-10-12 16:00:59 -04:00
+								*   [MDN Web Docs - Единицы CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
 								*   [Учебники по веб-дизайну]('https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573)
-												fixed russian translation for css units (#31031)

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.
											
										
										
											2019-08-07 19:26:51 +02:00
+								*   [Справка HTML по CSS-единицам](http://www.htmlhelp.com/reference/css/units.html)