box-sizing:border-box

[DivMan]

Зачем придумали box-sizing:border-box? В каких целях, его можно применить?

 

[Yazon_Nile]

http://jsfiddle.net/SdTYW/

[DivMan]

не убедил 

[Нарек]

Зачем придумали box-sizing:border-box? В каких целях, его можно применить?

Я использую для удобства. Например любой блок при добавлении внутреннего отступа (padding), увеличивается в размерах.

.block {    width: 100px;    padding: 0 10px;}

этот блок уже не 100px а 120px, соответственно, если тебе нужен блок с размером в 100px и с padding-ом по 10px с каждой стороны - нужно делать блок 80px шириной.

а box-sizing: border-box; "решает" эту "проблему", он автоматически сделает пространство внутри твоего блока 80px.

Edited June 7, 2014 by Нарек

[DivMan]

 

Зачем придумали box-sizing:border-box? В каких целях, его можно применить?

Я использую для удобства. Например любой блок при добавлении внутреннего отступа (padding), увеличивается в размерах.

.block {    width: 100px;    padding: 0 10px;}

этот блок уже не 100px а 120px, соответственно, если тебе нужен блок с размером в 100px и с padding-ом по 10px с каждой стороны - нужно делать блок 80px шириной.

а box-sizing: border-box; "решает" эту "проблему", он автоматически сделает пространство внутри твоего блока 80px.

 

в чём разница

http://jsfiddle.net/3TYaS/

http://jsfiddle.net/3TYaS/1/

Edited June 7, 2014 by DivMan

[advokatua]

в том, что прежде чем прописать поля, тебе надо пройтись и поменять ширину, учесть границы и прочую хрень, проще говоря - математикой заниматься там, где можно и не заниматься. А если ширина еще и в процентах задана, то геммор обеспечен. 

Edited June 7, 2014 by advokatua

[Нарек]

Разницы 2px, которых не видно на данном примере. Скажу попроще, иногда требуются отступы например 557px слева, 127px справа, а ширина должна быть скажем 800px. Что бы все это не подсчитать пишу ширину 800px,  border-box и все.

[SelenIT]

Простейший случай: резиновая ширина, фиксированные padding-и. Можно, конечно, width: calc(XX% - YYpx), но у box-sizing браузерная поддержка шире.