# Работа с отступами padding в CSS

Пусть некоторому элементу мы задали ширину `100px`. В CSS это отнюдь не означает, что элемент действительно будет шириной в `100px`. Дело в том, что добавление `padding` расширяет элемент и он становится больше, чем указано в свойстве `width`.

Давайте посмотрим на примере. Сделаем два блока, которым зададим ширину `100` пикселей. При этом второму блоку зададим `padding`, а первому - нет. В результате второй блок будет больше на размер отступа:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 100px; height: 100px; background: #f1f1f1; margin-bottom: 20px; } #elem2 { padding: 25px; /* задаем отступы */ width: 100px; height: 100px; background: #f1f1f1; }`

:

← →
↑