Свойство box-sizing
Задает алгоритм вычисления ширины и высоты блока
box-sizing: border-box;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
box-sizing: content-box;
На ширину и высоту блока влияет padding и border.
Например, если установлено width: 200px; padding-left: 10px; padding-right: 10px; border: 10px solid #000; в результате получим блок шириной 200 + 10 + 10 + 20 = 240px;
<style>
.example-1 {
box-sizing: content-box;
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 10px;
border: 10px solid blue;
}
</style>
<div class="example-1"></div>box-sizing: border-box;
На ширину блока не влияет padding и border.
Например, если установлено width: 200px; padding-left: 10px; padding-right: 10px; border: 10px solid #000; в результате получим блок шириной 200px, но область для содержимого блока станет меньше с учетом padding и border: 200 - 10 - 10 - 20 = 160px.
В данный момент данный способ используется чаще, так как проще управлять размерами элементов.
<style>
.example-2 {
box-sizing: border-box;
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 10px;
border: 10px solid blue;
}
</style>
<div class="example-2"></div>