Значение padding-box определяет отступ как часть содержимого. Теперь исходные размеры сохраняются, но содержимое еще включает отступ:
При наличии границ и отступов фактическая физическая ширина становится 334px × 134px. Это на 34 пиксела больше, чем исходные размеры (1 пиксел × 2 + 16 пикселов × 2 = 34 пиксела).
Здесь значения свойств width (ширина) и height (высота) увеличились на 2 пиксела с каждой стороны, так как при использовании модели content-box по умолчанию для каждой из четырех сторон была добавлена граница толщиной 1px.
box-sizing:[content-box|padding-box|border-box].
особенность блочной модели состоит в том, что по умолчанию ее свойству box-sizing присвоено значение content-box.
Модель состоит из области содержимого с тремя дополнительными слоями пространства вокруг него: отступами, границами и полями.
Разница между селектором звездочка (*) и :root заключается в том, что последний выбирает только основной контейнер DOM без дочерних элементов:
Селектор звездочка (*) выделяет все элементы в родительском элементе. В этом случае используется селектор table*:
