# Работа с отступами 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; }`

:

## Влияние границы

Граница также расширяет блок. Давайте посмотрим на аналогичном примере. Зададим второму блоку границу в `10px`:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 100px; height: 100px; background: #f1f1f1; margin-bottom: 20px; } #elem2 { width: 100px; height: 100px; background: #f1f1f1; border: 10px solid green; /* задаем границу */ }`

:

## Одновременно и `padding`, и граница

Если у блока есть и `padding`, и граница, то они будут вместе расширять блок:

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

:

## Что с этим делать

Как правило, описанное расширение вредное и вам хотелось бы от него избавиться. Для этого в CSS есть свойство `box-sizing`. Если указать ему значение `border-box`, то ни `padding`, ни граница не будут расширять блок:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 100px; height: 100px; background: #f1f1f1; margin-bottom: 20px; } #elem2 { width: 100px; height: 100px; background: #f1f1f1; padding: 25px; /* задаем отступы */ border: 10px solid green; /* задаем границу */ box-sizing: border-box; /* убираем расширение */ }`

:

Самостоятельно опробуйте описанное свойство `box-sizing`.

←→
↑