Форум сайтостроителей

box-sizing

Песочница

Применяется для изменения алгоритма расчёта ширины и высоты элемента.Согласно спецификации CSS ширина блока складывается из ширины содержимого (width), значений margin, padding и border. Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не содержимого, а размеры блока.
div {
  width: 230px;
  padding: 20px; 
  border: 3px dashed #c26558;
  box-sizing: content-box;
}

Краткая информация

Значение по умолчаниюcontent-box
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Значения

content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border.
border-box
Свойства width и height включают в себя значения padding и border, но не margin.

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !