Нехай деякому елементу ми задали ширину
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.