Объясните, какая ширина в пикселях у элемента с классом .item в следующем фрагменте кода?

Question

[4mn13y]

div class="wrapper"
  ul class="list-items"
   li class="item"
   /li  
  /ul
/div


.wrapper {
  width: 1000px;                      
  padding: 50px;
}


.list-items{
  width: 50%;
}

.item {
  width: 70%;
}

Comments

[Вадим]

Объясните, какая ширина у моего стола.
Он деревянный, на 4х металлических ножках по углам столешницы. Ножки чёрные. и по длине 70% от ширины стола.

[Егор Живагин]

А html структуру можно? Без неё вообще непонятно, что за wrapper и list-items

Если гадать на хрустальном шаре: 1000 x 0.5 x 0.7 = 350px
padding ни на что не повлияет

[4mn13y]

Егор Живагин, да,но почему паддинг не повлияете,объясните если не трудно

[Froggyweb]

4mn13y, где-то есть box-sizing: border-box

[4mn13y]

Froggyweb, он не прописан в свойствах

[Егор Живагин]

4mn13y, даже не знаю как объяснить... а почему должен? Его значение в принципе никак не влияет на width

[Сергей delphinpro]

Егор Живагин, Froggyweb, как раз-таки влияет, если он прописан.
с box-sizing контентная ширина враппера будет 1000 - 50 * 2.

[4mn13y]

Егор Живагин, я думал что к ширине надо прибавлять паддинги бордер и марджины

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

4mn13y, маргины даже в стандартной блочной модели не прибавляются

[Егор Живагин]

Сергей delphinpro, так это контентная ширина, разве проценты будут считаться от неё? Мне казалось, что от полной

[Сергей delphinpro]

Егор Живагин, ширина внутреннего элемента, заданного в процентах, рассчитывается от доступной ширины родителя, то есть ширины content области.

[Саман]

350px

Answer 1

[cssfish]

Если что-то мешает сделать html страничку и проверить, то прикидываем логически:

Если другого css нет, получаем:

1) по умолчанию box-sizing: content-box, поэтому "внутренняя" ширина у wrapper останется 1000px, а общая - 1100px.

2) ширина list-items заявлена в 50%, рассчитывается от "внутренней" ширины родителя
1000 * 0.5 = 500px
но по умолчанию этому элементу задан отступ. В каждом браузере свой, возможно.
В FF например это 40px паддинг слева. Но так как у нас box-sizing: content-box, то опять же "внутренняя" ширина у list-items останется 500px, а внешняя 500+40(или другое)

3) ширина item заявлена в 70%, рассчитывается от "внутренней" ширины родителя, получаем
500 * 0.7 = 350px

У li вроде никаких отступов по умолчанию нет, поэтому это и будет ответом...