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

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

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

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

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

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

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

div { width: 3in; } /* ширина блока 3 дюйма */
div { width: 1.5cm; } /* ширина блока 1.5 сантиметра */
div { width: 13mm; } /* ширина блока 13 миллиметров */
div { font-size: 12pt; } /* шрифт 12 пунктов */
div { font-size: 12pc; } /* шрифт 12 пик */

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

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

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

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

p { font-size: 14px; }
p.second { margin-left: 1em; }
p.third { margin-left: 2em; }

<p class = "first">Абзац</p>
<p class = "second">Абзац с отступом 1em</p>
<p class = "third">Абзац с отступом 2em</p>

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

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

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

Похожие уроки и записи блога

1. Допишите в CSS код для первого абзаца свойство font-size со значением 20 пикселей. Не забывайте ставить точку с запятой после свойства, например, color: #FFF;.
2. Допишите в CSS код для второго абзаца свойство font-size со значением 25 пунктов.
3. Допишите в CSS код для третьего абзаца свойство font-size со значением 2.5em.
4. Допишите в CSS код для четвертого абзаца свойство font-size со значением половина дюйма.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.