Размер

Справочник:

Значение

Характеристики свойства

В каких браузерах работает?


6.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Для чего используется?

Неотъемлимой частью верстки является определение габаритных размеров блока, а также размеров шрифта и тому подобное. Спецификацией CSS предусмотрены два вида размерных единиц: относительные и абсолютные. Разница в этих единицах измерения заключается в том, что относительные зависят от внешних факторов и размеров смежных элементов, а абсолютные устанавливают независимый размер, который остается постоянным при любых условиях.

Относительный размер

Такой вид размеров зачастую применяется для определения величины шрифта, а также при определении соотношения между рассматриваемым элементом и другими контейнерами, у которых уже определен размер. Ниже представлен перечень относительных единиц, которые используются в таблицах стилей:

em - соответствует размеру шрифта для определенного контейнера.
ex - повторяет высоту знака х.
px - приравнивается к одному пикселю.
% - определяет процентное соотношение между элементами.

Теперь рассмотрим каждый из них более подробно.

Как уже упоминалось, em приравнивается к величине шрифта рассматриваемого блока. Размер шрифта может быть определен через свойство font-size. Если размер шрифта не определен, как фиксированное значение, то браузер самостоятельно определяет этот параметр по умолчанию, точнее размер шрифта, что в свою очередь и предопределяет величину одной единицы em. Таким образом можно констатировать, что изначально единица em соответствует размеру шрифта родительского блока, который определен браузером по умолчанию.

Процентный размер по принципу расчета величины объекта аналогичен единице em, то есть 100% соответствует 1em.

Что касается ex, то это высота символа «x» в строчном варианте (имеется ввиду нижний регистр). Но не смотря в различии понятий значений ex и em, эти единицы одинаково зависят от размера родительского шрифта или размера, установленного браузером по умолчанию.

Пиксельное значение соответствует просто цифровой точке, которая отображается устройством вывода (монитором). Она напрямую зависит от технического оборудования устройства и его способа отображения информации. Также на эту единицу влияет такой параметр, как разрешение экрана.

Абсолютный размер

Применение такого типа единиц измерения встречается значительно реже. Практика показывает, что они нашли себе применение только в точном указании высоты текста. Изучить перечень этих единиц можно из списка, представленного ниже

in - означает дюймы. Для сравнения, 1 дюйм = 2,54 сантиметра.
cm - устанавливает величину объекта в сантиметрах.
mm - высота объекта отображается в миллиметрах.
pt - это обозначение означает пункты, которые занимают 1/72 часть дюйма.
pc - пика, которую тоже можно измерить дюймами - 1/7 часть. В тоже время пику можно соотнести с пунктом: 1pc = 12pt.

Из указанного списка предпочтение отдают пунктам, так как они встречаются практически во всех существующих текстовых редакторах. Нельзя не поспорить с тем, что любому человеку более знакома метрическая система измерения, однако в цифровом мире программирования предпочтение отдают не таким единицам.

Как правильно задавать?

CSS-правило: число в процентах;

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры</title>
  <style>
h1 {
	font-size: 4em;
	color:#0e0074;
	}
p {
	font-size: 24pt;
	color:#444;
   }
  </style>
 </head>
 <body>
   <h1>Величина этого заголовка 4em.</h1>
   <p>Основной текст пусть будет высотой в 24 пункта.</p>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Размеры