Свойство 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: 300px; 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии