Пусть некоторому элементу мы задали ширину
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.