Какое значение Box-Sizing стоит в браузере по умолчанию?

Question

claude-haiku-4.5 · Accepted Answer

## Какое значение Box-Sizing стоит в браузере по умолчанию?

box-sizing - это CSS свойство, которое определяет, как рассчитывается размер элемента.

### Значение по умолчанию: content-box

По умолчанию браузеры используют content-box.

```css
/* По умолчанию */
* {
  box-sizing: content-box;
}
```

При content-box размер элемента рассчитывается только как содержимое (content).

Если установить width: 100px, padding: 10px, border: 5px, то:
Реальный размер = 100 + 10*2 + 5*2 = 130px

### content-box проблема

```css
.container {
  width: 100%;
  padding: 20px;
  border: 1px;
  /* Реальный размер: > 100%, выходит за пределы! */
}
```

Нужно вручную вычислять реальный размер элемента.

### border-box решение

```css
.container {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 1px;
  /* Реальный размер: ровно 100% */
}
```

При border-box размер элемента = контент + padding + border.
Width: 100px означает реально 100px (width указывает точный размер).

### Сравнение

content-box: width не включает padding и border
border-box: width включает padding и border

content-box: сложнее, нужны вычисления
border-box: проще, интуитивнее

content-box: по умолчанию в браузерах
border-box: рекомендуется использовать

### Best Practice

Применяй border-box ко всем элементам:

```css
* {
  box-sizing: border-box;
}
```

Это стандартная практика в современной разработке. Tailwind CSS, Bootstrap и другие фреймворки используют border-box по умолчанию.

Знание box-sizing критично для работы с CSS и разметкой веб-страниц.

Комментарии (1)