# Расширение элементов в CSS для JavaScript

Задание CSS свойств `width` и `height` не гарантирует того, что элемент станет заданного размера. Давайте посмотрим на примерах.

## Пример

Сейчас размеры элемента совпадают с заданными:

`<div id="elem"> text </div>` `#elem { width: 200px; height: 200px; margin: 50px auto; background: #CFF5BF; }`

:

## Пример

А теперь давайте зададим элементу свойство `padding`. В результате реальная ширина элемента станет больше и расширится на заданное значение внутреннего отступа:

`<div id="elem"> text </div>` `#elem { padding: 25px; width: 200px; height: 200px; margin: 50px auto; background: #CFF5BF; }`

:

## Пример

Наличие границы также расширяет элемент:

`<div id="elem"> text </div>` `#elem { width: 200px; height: 200px; margin: 50px auto; background: #CFF5BF; border: 20px solid #F0D7A1; }`

:

## Пример

Свойство `box-sizing` позволяет изменять описанное выше поведение. Можно сделать так, чтобы ни внутренний отступ, ни граница не расширяли элемент. Для этого этому свойству нужно задать значение `border-box`:

`<div id="elem"> text </div>` `#elem { box-sizing: border-box; padding: 20px; width: 200px; height: 200px; margin: 50px auto; background: #CFF5BF; border: 20px solid #F0D7A1; }`

:

## Важность описанного

С точки зрения JavaScript описанная ситуация не очень удобна. Ведь получается, что прочитав значение свойства `width` мы совсем не можем быть уверенными в том, что элемент будет именно этой ширины.

←→
↑
en ru