Почему див не хочет становиться ровно в пиксели которые я указал, при условии использования box-sizing: border-box?

Question

[germankraut]

https://jsfiddle.net/0yf4m75d/5/
Я написал каждый что для каждого item должно быть 250px в ширину. Автоматически должно рассчитаться таким образом, чтобы ширина стала ровно такой, которой я ее указал, не смотря ни на какие изменения(border), ровно 250px, потому что использую для всего box sizing border box. Почему так не происходит? Почему он мне рассчитывает 298 пикселей вместо 250?

Comments

[MagnusDidNotBetray]

Потому что

*, *:after, *:before{
    box-sizing: inherit;
}

[germankraut]

MagnusDidNotBetray, спасибо, почему то в уроке где смотрел говорили что это одна и та же вещь. Так зачем нужно это?

[MagnusDidNotBetray]

germankraut, видимо вам в уроке сказали, или хотели сказать, сделать так:

*{
    box-sizing: border-box;
}
*::after, *::before{
    box-sizing: inherit;
}

Иначе вы перезаписываете border-box для * на inherit

Answer 1

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

вот так правильно

html{
    box-sizing: border-box;
}
*, *:after, *:before{
    box-sizing: inherit;
}

Comments

[germankraut]

Спасибо, в уроке так и показывалось, не обратил внимание. А почему он не реагирует на *? Это по семантическому смыслу одно и то же, ко всему применяется, разве нет

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

germankraut, а пес его знает. но если через звездочку писать, то правило с инхерит нужно убрать