Как рассчитать ширину по имеющимся кодам?

Question

[Twixel]

Не получается корректно рассчитать ширину по коду:

span 
{
display: block;
width: 120px; 
padding: 10px 15 px 20px 25px; 
border: 1px solid#00000
}

Получается что ширина 162px или из-за свойства display: block получится 120px? Так же интересует как могут повлиять другие свойства display и могут ли, к примеру: inline?

Answer 1

[Ankhena]

Посмотрите свойство box-sizing
По умолчанию ширина блока в браузере складывается из width, padding и border.
120 + 15 + 25 + 1 + 1 = 162

Если вы зададите box-sizing:border-box, то конечная ширина будет определяться свойством width

Так же интересует как могу повлиять другие свойства display и могут ли, к примеру: inline?

Да, могут.
К inline писать width бесполезно, оно вообще не применится, а будет считаться по контенту.

Comments

[Twixel]

Есть только эта частичка кода, больше ничего не дается.

[Ankhena]

Twixel, я вроде ответила

[Ankhena]

Twixel, уточните, что осталось непонятным

[Twixel]

Вроде понял, спасибо. box-sizing нету, поэтому и не понятно, что да как решается, еще раз спасибо

[Ankhena]

Twixel, если box-sizing не указано, то оно = content-box
Это легко проверяется через инструменты разработчика в браузере. Также как и получившаяся ширина.

[Twixel]

Ankhena, А как проверить, просто тупо вставить в код?

[Ankhena]

Twixel, лучше умно вставить в код ))))))

[Twixel]

Ankhena, Понятно, просто я думал, что для этого требуется какое то доп ПО)

[Ankhena]

Twixel, блокнот и браузер