Css 如何从100%宽度减去填充宽度？

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

.container{
    width: 150px;
}

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

.from-item{
    width: 100%;
}

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

---

您应该考虑将其放入CSS中：

 * { box-sizing: border-box } 

这会改变长方体模型，使填充不会增加元素在屏幕上占据的大小。在我和许多其他人看来，这是一个更好的模式：

---

有关长方体模型的一般信息：

您可以使用

长方体大小：边框长方体

来解决问题，但它是css3属性。因此与旧浏览器不兼容

实现这一点的另一种方法是在输入周围放置一个包装器div，并对其进行填充

<div class="ibox"><input type="text" class="from-item"></div>

.ibox{
    padding: 5px;   
}

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

.ibox{
填充物：5px；
}
输入[type=“text”]{
宽度：100%；
}

---

这是演示链接

您到底想要什么？我是说你面临什么问题？