# Отступы и единицы em в CSS

Пусть у нас есть следующие теги:

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

Пусть размер шрифта абзаца задан в `px`:

`p { font-size: 20px; }`

Давайте установим марджин этого абзаца в единицах `em`. В этом случае размер отступа будет вычисляться от размера шрифта абзаца, а не его родителя:

`p { font-size: 20px; margin: 2em; /* соответствует 40px */ }`

Пусть теперь абзацу задан размер в `em`:

`div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ }`

Давайте опять зададим `margin` нашему элементу. В этом случае он по-прежнему будет рассчитываться от текущего значения шрифта самого элемента. При этом само значение шрифта будет рассчитываться относительно родителя:

`div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ margin: 2em; /* соответствует 80px */ }`

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

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

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

Определите, какой размер шрифта и отступа в `px` будут иметь теги `div` в результате выполнения следующего кода:

`section { font-size: 10px; } div { font-size: 2em; margin: 2em; }`

Определите, какой размер шрифта и отступа в `px` будут иметь теги `div` в результате выполнения следующего кода:

`section { font-size: 10px; } div { font-size: 2em; margin: 3em; }`

Определите, какой размер шрифта и отступа в `px` будут иметь теги `div` в результате выполнения следующего кода:

`section { font-size: 10px; } div { font-size: 2em; margin: 0.5em; }`

Определите, какой размер шрифта и отступа в `px` будут иметь теги `p` в результате выполнения следующего кода:

`section { font-size: 10px; } div { font-size: 2em; } p { font-size: 2em; margin: 2em; }`

Определите, какой размер шрифта и отступа в `px` будут иметь теги `p` в результате выполнения следующего кода:

`section { font-size: 10px; } div { font-size: 1.5em; } p { font-size: 1em; margin: 1.5em; }`
←→
↑