Html 在按钮上设置宽度=100%时出现问题

实际上，我试图将按钮宽度设置为输入宽度，但在100%时，按钮宽度不相同，我不知道为什么

正文{
背景：#fff；
填充：0px；
边际：0px；
字体系列：“源Sans-Pro”，无衬线；
}
输入
钮扣{
字体系列：“源Sans-Pro”，无衬线；
}
.主分区{
宽度：20%；
保证金：0px自动；
边缘顶部：150px；
填充：20px；
}
.主分区输入{
显示：块；
边框：1px实心#ccc；
边界半径：3px；
背景：#fff；
填充：15px；
大纲：无；
宽度：100%；
边缘底部：20px；
}
.主div按钮{
显示：块；
背景：#00a2ff；
颜色：#fff；
边界：0px；
边界半径：3px；
填充：15px；
宽度：100%；
}

电子脂肪
登录

您应该使用

框大小：边框框属性，您将在输入字段中找到有关它的信息

input[type=email],
input[type=password] {
    box-sizing : border-box;
}

如果有帮助，请告诉我！如果您想查看，请查看代码笔的链接
 您的按钮是
100%
宽度，但您的输入是
100%+30px
宽度。它归结为
输入
元素和
按钮
元素的CSS属性没有相同的默认值

默认情况下，
s应用了
框大小：边框框
。这意味着填充是向内应用的，而不是向外应用的。如果您给一个项目的宽度为
500px
，填充为
15px
，并且
框大小：边框框
，则宽度将保持为
500px

但是，
元素（以及大多数元素）是
框大小：内容框
，这意味着填充将增加其宽度。相同的
500px
宽度，
15px
填充元素的宽度将改为
530px
（假设填充应用于左侧和右侧）

解决办法是使它们保持一致。将
框大小：边框框
添加到输入中（如下所示），或将
按钮
设置为
框大小：内容框


正文{
背景：#fff；
填充：0px；
边际：0px；
字体系列：“源Sans-Pro”，无衬线；
}
输入
钮扣{
字体系列：“源Sans-Pro”，无衬线；
}
.主分区{
宽度：20%；
保证金：0px自动；
边缘顶部：150px；
填充：20px；
}
.主分区输入{
显示：块；
边框：1px实心#ccc；
边界半径：3px；
背景：#fff；
填充：15px；
大纲：无；
宽度：100%；
边缘底部：20px；
框大小：边框框；
}
.主div按钮{
显示：块；
背景：#00a2ff；
颜色：#fff；
边界：0px；
边界半径：3px；
填充：15px；
宽度：100%；
}

电子脂肪
登录
实际上，CSS正应用于内容。查看chrome inspector的屏幕截图


因此，应用于输入的填充将输入扩展到20%的宽度之外，使按钮宽度看起来不是100%

因此，为了避免这种情况，可以使用
框大小调整
属性。
您可以在MDN上阅读有关盒子大小的信息。

也提供你的htmlplease@MartinBA没有什么特别的只是这个在身体“Fatturazione Elettronica登录”伟大的解决方案谢谢你，谢谢你的解释
* {
    box-sizing:border-box;
 }