CSS - мерни единици

В CSS командите често се използват различни единици за размер, например за задаване размер на текста, междуредово разстояние, абсолютно позициониране на текст или изображение и т.н. Преди да продължим с подробно описание на отделните CSS команди, нека разгледаме какви мерни единици може да се използват.

Абсолютни единици

Размер или разстояние, зададени с абсолютни мерни единици, не зависят от избраната големина на шрифта.

• mm - милиметър
• cm - сантиметър
• in - инч(inch), приблизително 2.56 сантиметра
• pt - point, 1/72 от инча
• pc - pica, равна на 12 points

Относителни единици

Браузърите позволяват на потребителите да променят размера на текста на интернет страниците. Ако за позициониране на някой елемент (например снимка) са използвани абсолютни единици, има голяма вероятност при смяна големината на текста елементът да се окаже на неочаквано място в страницата. За да се предотврати подобно нарушаване на дизайна на страниците, е удобно да се използват относителни единици.

• px - pixel, една точка (пиксел) на компютърния екран. Абсолютният размер зависи от разделителната способност на монитора, на който е показана интернет страницата.
• em - 1em винаги е равно на големината на използвания в момента шрифт за дадения елемент. Размерът на текста по подразбиране в браузърите е 16 px и следователно, ако не е указано нещо друго, за текста на страниците 1em=16 px.

  Понеже em е относителна единица, ако настоящия шрифт за заглавие h1 е примерно 18 px, то междуредово разстояние, зададено с
  
  h1{ line-height: 0.5em}
  
  ще отговаря на 9px , а ако размерът за h1 бъде сменен на 24px, 0.5em вече ще бъде 12px.

• ex - подобно на em, ex зависи от големината на избрания шрифт и е равно на големината на малката буква x (екс).

Проценти

Стойност, зададена с процент, %, може да има съвсем различно измерение - каква ще бъде конкретната стойност зависи от контекста.