Как расчитывать высоту и ширину элемента .content в коде?

Question

[andrreeva]

Здравствуйте. Помогите, пожалуйста, разобраться.

Есть определённый код, например:
.content {
width: 100px;
height: 100px;
padding: 0 10px 10px 5px;
border: 1px solid #000000;
border-right-width: 2px;
}
В данном коде необходимо рассчитать ширину элемента. Тут все понятно, ответ будет 118.

Но что делать, если у нас появляется такое свойство, как « box-sizing: border-box;»?

Например, есть такое задание и необходимо рассчитать высоту элемента .content

.content {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px 0 10px 5px;
border: 1px solid #000000;
}

Ответом будет 100px?

Или вот такой вот код, где необходимо вычислить ширину элемента.
.content {
box-sizing: border-box;
width: 200px;
padding: 50px 25px 100px;
border: 3px solid #000000;
border-left-width: 1px;
}

Тут ответом будет 200 px?

В целом, я понимаю, что такое «box-sizing: border-box;»
Но вот когда вижу данные примеры, сразу начинаю сомневаться. Подскажите, пожалуйста, правильно ли я решила и поняла свойство?

Comments

[Ankhena]

Я уже вам писала в прошлом вопросе: сомневаетесь, отройте браузер и проверьте.
Почему этого не сделать-то?

Но да, верно.

Answer 1

[Константин Фещук]

100px. и 200px верно, т.к. свойство border-box, ограничивает расширение элемента и он остается при любых отступах и контурах в своих границах, уменьшая рабочее поле.