Рассчитайте ширину элемента .content в следующем коде?

Question

[Владислав Заваруев]

.content {
box-sizing: border-box;
width: 200px;
padding: 50px 25px 100px;
border: 3px solid #000000;
border-left-width: 1px;
}

Ответы:
1. 200px
2. 256px
3. 254px - Ответ получился такой, но я не думаю, что это значение тут просто так ( box-sizing: )
4. 350px
5. 354px
6. 356px

Правильный ответ? Eсли нет, то какой и как его вычислить? Ломаю голову.
Ширину и высоту элемента вычислил, а вот с этим значение мне кажется результат будет иначе.

Comments

[Froggyweb]

ответ 200, но зачем это тебе?

[Владислав Заваруев]

Тест к обучению.

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

1. 100px - Тут получается этот? (как я понял)
2. 101px
3. 102px
4. 120px
5. 121px
6. 122px

[Сергей delphinpro]

Ответ получился такой, но я не думаю, что это значение тут просто так ( box-sizing: )

Ну вообще-то по умолчанию (box-sizing:content-box) ответ будет 256.

Если box-sizing:padding-box, то 250
Если box-sizing:border-box, то 200

Откуда вы 254 взяли?

[Froggyweb]

ну так изучи свойство box-sizing там не только border-box может быть....

[Сергей delphinpro]

Ой блин, да, – 254 по дефолту...

[Владислав Заваруев]

Сергей delphinpro, Я посчитал: Ширина 200 + Вн.Отступ: Право 25, Лево 25 + Рамка 3 + Ширина рамки 1
По формуле элемента

[Антон Литвиненко]

Кураторам нравится)

[Сергей delphinpro]

Владислав Заваруев, не так, хоть и цифра та же =)

width 200 + padding 25 * 2 + рамка 3 * 2 - (рамка слева 3 - 1)

Хотя хрен с ним, суть та же =)

Но это расчеты в модели content-box.
В border-box всё умещается в заданную ширину, поэтому и расчетов никаких не нужно
= width 200

[Владислав Заваруев]

Сергей delphinpro, Подскажите. Правильно посчитал, что в этом вопросе ответ.

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

1. 100px
2. 101px
3. 102px
4. 120px
5. 121px
6. 122px

Высота 100 + Рамка 1 + Вн.Отступ: Верх 10, Низ 10

[Сергей delphinpro]

Владислав Заваруев, нет
box-sizing: border-box;
Значит просто height: 100px; -> 100

[Владислав Заваруев]

Сергей delphinpro, Это последний вопрос. Тут-то я хоть правильно посчитал =))))

Рассчитайте ширину элемента .content в следующем коде

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

1. 100px
2. 116px
3. 117px
4. 118px

Ширина 100 + Лево 5 + Право 10 + Рамка 1 + Ширина рамки справа 2

[Сергей delphinpro]

Владислав Заваруев, Здесь верно

[Владислав Заваруев]

Сергей delphinpro, Спасибо. Всё правильно.

Answer 1

[Владислав Заваруев]

1. 200px