тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Работа с отступами 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.