Html div内100%宽度的输入与div重叠

宽度为100%的输入中的边距有问题，因为它与div容器重叠

我在论坛上寻找解决方案，可能的解决方案是应用框大小：边框框，但它不起作用

解决方案对我不起作用：

html{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
*，*：：之前，*：：之后{
-webkit框大小：继承；
-moz盒大小：继承；
框大小：继承；
}
身体，预{
保证金：0；
填充：0；
}
.集装箱{
宽度：100%；
最大宽度：980px；
保证金：0自动；
}
.集装箱(u)计算器{
宽度：100%；
最大宽度：400px；
背景色：番茄；
边界半径：5px；
保证金：5px自动；
}
.container\u calculator>标签{
显示：内联块；
颜色：#fff；
利润率：10px20px；
}
.container\u计算器>输入{
高度：20px；
边框：1个实心番茄；
边界半径：5px；
宽度：100%；
利润率：5px20px；
}
分区结果\u bin2dec{
边框：1px实心#edf2f7；
背景色：#edf2f7；
边界半径：10px；
边缘顶部：30px；
高度：35px；
}

数
十二月十日
Bin:01

您正在将20px添加到边距中

更改此元素的css：

以前的：

.container_calculator input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 0px;
}

新的：

---

只需将

padding

插入父项，并删除输入和标签中的

margin

.container_calculator>input{

    margin-top:5px;

   //Other codes...

}

html{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
*,
*：：之前，
*：：之后{
-webkit框大小：继承；
-moz盒大小：继承；
框大小：继承；
}
身体，
前{
保证金：0；
填充：0；
}
.集装箱{
宽度：100%；
最大宽度：980px；
保证金：0自动；
}
.集装箱(u)计算器{
宽度：100%；
最大宽度：400px；
背景色：番茄；
边界半径：5px；
保证金：5px自动；
填充：5px20px；
}
.container\u calculator>标签{
显示：内联块；
颜色：#fff；
}
.container\u计算器>输入{
高度：20px；
边框：1个实心番茄；
边界半径：5px；
宽度：100%；
}
分区结果\u bin2dec{
边框：1px实心#edf2f7；
背景色：#edf2f7；
边界半径：10px；
边缘顶部：30px；
高度：35px；
}

数
十二月十日
Bin:01

相反，您可以在子对象上使用

填充

，这样就可以将其包括在框大小调整中

---

如您所说的链接答案中所述，不适用于您，请参阅下面的盒子尺寸规格链接，以了解其工作原理和使用方法

---

可能的例子：

html{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
*,
*：：之前，
*：：之后{
-webkit框大小：继承；
-moz盒大小：继承；
框大小：继承；
}
身体，
前{
保证金：0；
填充：0；
}
.集装箱{
宽度：100%；
最大宽度：980px；
保证金：0自动；
}
.集装箱(u)计算器{
宽度：100%；
最大宽度：400px；
背景色：番茄；
边界半径：5px；
保证金：5px自动；
填充：0 20px；/*已添加*/
框大小：边框框；/*已添加*/
}
.container\u calculator>标签{
显示：内联块；
颜色：#fff；
保证金：10px 0 0px；/*已修改*/
}
.container\u计算器>输入{
高度：20px；
边框：1个实心番茄；
边界半径：5px；
宽度：100%；
边距：5px 0px；/*已修改*/
}
分区结果\u bin2dec{
边框：1px实心#edf2f7；
背景色：#edf2f7；
边界半径：10px；
边缘顶部：30px；
高度：35px；
}

数
十二月十日
Bin:01

非常感谢您分享解决方案，我认为边距是边框框计算的一部分。

.container_calculator input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 0px;
}

.container_calculator {

   padding: 5px 20px;<-------------insert this line

   //Other codes...

}

.container_calculator > input {

  margin: 5px 20px;<--------------remove this

  //Other codes...

}

.container_calculator>label {

 margin: 10px 0 0 20px;<---------remove this

 //Other codes...

}

.container_calculator>input{

    margin-top:5px;

   //Other codes...

}