Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

Единицы измерения длины в CSS

Очень многое в CSS зависит от единиц измерения длины. Было бы нельзя задать отступы, указывать ширину элемента, если бы не было единиц измерения длины. Единицы измерения длины могут быть как положительные, так и отрицательные (не все могут быть отрицательными), а так же могут быть целыми и вещественными. Любая длина указывается не только цифрами, но и двумя буквами после них. Эти буквы означают аббревиатуру единицы измерения, которую используем. Например, есть in (дюймы), px (пиксели) и другие. Если вы указываете длину 0, то единицы измерения писать не нужно.

В CSS существует два вида единиц измерения длины: абсолютные значения и относительные значения. Далее подробно.

Абсолютные единицы измерения длины

Целых пять абсолютных единиц измерения длины, но их практически не используют в веб-разработке – они не такие удобные, как относительные единицы.

  • Дюймы (in) – американская мера измерения длины. Совсем не понятно, зачем эти единицы измерения в веб-разработке.
  • Сантиметры (cm)
  • Миллиметры (mm)
  • Пункты (pt) - эта типографическая единица измерения, чаще всего применяется для текста. 72 пункта равны одному дюйму.
  • Пики (pc) – тоже типографическая единица измерения, которая равна одной шестой дюйма.

А далее примеры применения абсолютных единиц измерения. Смотрим первый пример.

Пример 1
div { width: 3in; } /* ширина блока 3 дюйма */
div { width: 1.5cm; } /* ширина блока 1.5 сантиметра */
div { width: 13mm; } /* ширина блока 13 миллиметров */
div { font-size: 12pt; } /* шрифт 12 пунктов */
div { font-size: 12pc; } /* шрифт 12 пик */
Между значением (цифрой) и единицами измерения нет пробела! Например, 21px - после 21 нет пробела.

Относительные единицы измерения длины

Существует три относительных единицы измерения длины: em, ex, px. Далее подробно обо всех.

Подробно о единицах измерения em и ex

Допустим, font-size для одного из шрифтов равен 10px, то получается 1em для этого шрифта равен 10px. Давайте рассмотрим пример второй. Даны три абзаца с размером шрифта 14px. Сделаем отступ слева у первого абзац 1em, а у второго 2em и посмотрим что получилось.

Пример 2, CSS код
p { font-size: 14px; }
p.second { margin-left: 1em; }
p.third { margin-left: 2em; }
Пример 2, HTML код
<p class = "first">Абзац</p>
<p class = "second">Абзац с отступом 1em</p>
<p class = "third">Абзац с отступом 2em</p>

Подробно о единицах измерения px (пиксель)

Пиксель – это точка на экране. Пиксели практически идеальны. Если напишем font-size: 20px; то высота шрифта будет 20 пикселей (точек на экране).

Подведем итог: пиксели самые удобные единицы измерения длины в CSS.

<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно