css - 如何从 100% 宽度中减去填充宽度？

Question

当我为输入字段设置填充大小时，它会自动更改大小。它变大了。

.container{
    width: 150px;
}

.item label{    
    display: block;
    width: 100%;
    margin-bottom: 10px;    
}

.from-item{
    width: 100%;
}

input[type="text"]{ 
    width: 100%;    
    padding: 5px;   
}

JSFfiddle

Answer 1

你应该考虑把它放在你的 CSS 中:

 * { box-sizing: border-box } 

这改变了盒子模型，使得填充不会增加元素在屏幕上占据的大小。在我和许多其他人看来，这是一个更好的模型:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

盒子模型的一般信息:http://css-tricks.com/the-css-box-model/