# Единицы rem в CSS

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

Поэтому были введены единицы `rem`. Значения этих единиц всегда рассчитываются относительно размера шрифта, заданного для тега `html`.

Как вы уже знаете, по умолчанию это значение равно `16px`:

`html { font-size: 16px; }`

Давайте посмотрим на примере. Пусть у нас есть вот такие теги:

`<div> <p> text </p> </div>`

Давайте укажем им размеры в `rem`:

`div { font-size: 2rem; /* соответствует 32px */ } p { font-size: 2rem; /* соответствует 32px */ margin: 2rem; /* соответствует 32px */ }`

## Практические задачи

Пусть у нас есть HTML код, для которого мы будем решать задачи:

`<main> <h1>header</h1> <section> <h2>header</h2> <p> text </p> <p> text </p> </section> <section> <h2>header</h2> <p> text </p> <p> text </p> </section> </main>`

Во всех задачах ниже перепишите в `rem` все единицы, заданные в пикселях:

`main { margin: 64px auto 32px; } h1 { font-size: 32px; } section { font-size: 16px; margin-bottom: 32px; } h2 { font-size: 24px; margin-bottom: 32px; } p { font-size: 20px; margin-bottom: 12px; }`
← →
↑