box-sizing | CSS

• Блочная модель CSS
• Как работает свойство box-sizing
• box-sizing не работает
• Почти полностью можно обойтись без box-sizing благодаря функции calc()
• Пункты HTML меню съезжают вниз

Блочная модель CSS

По умолчанию margin, padding и border увеличивают коробку элемента и прибавляются к width, если width не имеет значение auto, или height.

изменить margin: (внешний отступ от границы элемента)
изменить border: (граница)
изменить padding: (внутренний отступ от содержимого до границы)

<div id="dva1"></div>

Как сделать, чтобы блок не выходил за границы родителя

Нужно уменьшить width на padding-left и padding-right, а height на padding-top и padding-bottom: нажать

<div id="pyat">
  <div id="pyat1"></div>
</div>

Не рассмотрен вариант, когда всё что выходит нужно обрезать.

Как работает свойство box-sizing

При box-sizing: padding-box; [w3.org] коробку не растягивает padding, он включён в width/height. Есть исключения.
При box-sizing: border-box; коробку не растягивают padding и border, они включены в width/height. Есть исключения.

content-box padding-box border-box

ширина × высота: px × px

<style>
div {
  height: 70px;
  margin: 30px;
  border: 5px solid green;
  padding: 20px;
  background: #fff5d7;
  box-sizing: content-boxpadding-boxborder-box;
}
</style>

<div></div>

box-sizing: content-box | padding-box | border-box | inherit


content-box
ширина = width + margin-right + margin-left + padding-right + padding-left + border-right-width + border-left-width
высота = height + margin-top + margin-bottom + padding-top + padding-bottom + border-top-width + border-bottom-width
padding-box
В width входят padding-right и padding-left
ширина = width + margin-right + margin-left + border-right-width + border-left-width
В height входят padding-top и padding-bottom
высота = height + margin-top + margin-bottom + border-top-width + border-bottom-width
border-box
В width входят padding-right, padding-left, border-right-width и border-left-width
ширина = width + margin-right + margin-left
В height входят padding-top, padding-bottom, border-top-width и border-bottom-width
высота = height + margin-top + margin-bottom
inherit
наследует значение родителя

width: 100%; и padding или border

Наиболее частый пример: нажать

<div id="tri1">текст</div>

<div id="tri2">текст</div>

<div id="tri1">текст</div>
<div id="tri2">текст</div>

box-sizing не работает

При box-sizing: padding-box; блок всё же будет расширяться на величину, равную положительному числу из

• padding-right + padding-left - width
• padding-top + padding-bottom - height

При box-sizing: border-box; блок всё же будет расширяться на величину, равную положительному числу из

• padding-right + padding-left + border-right-width + border-left-width - width
• padding-top + padding-bottom + border-top-width + border-bottom-width - height

изменить height:

То есть, предположение, что с height: 0; и box-sizing: border-box; блок будет исчезать, неверно.

<div id="chetyre"></div>