输入框超出<div>容器求助：使用border-spacing:border-box仍未解决

问题根源 #

你误用了CSS属性：border-spacing: border-box是错误用法，border-spacing仅用于控制表格单元格间的间距，和元素盒模型无关。正确实现“宽高包含padding、border”的属性是box-sizing: border-box。

修正步骤 #

1. 替换错误的全局样式
   把原来的错误代码：

   *{
       border-spacing: border-box;
   }
   

   替换为：

   *, *::before, *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   

   新增*::before, *::after是为了确保伪元素也遵循盒模型规则，同时重置默认margin和padding，避免浏览器默认样式干扰布局。

2. 输入框样式验证
   你的输入框设置了width:100%和padding:12px，启用box-sizing: border-box后，输入框的总宽度（内容+padding+border）会被严格限制在父容器宽度内，不会超出右侧padding区域，输入文本也会自然容纳在padding范围内。

完整修正后的CSS代码 #

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 12px;
    margin: 15px 30px;
    font-size: 17px;
}

.main {
    background-color: #f2f2f2;
}

header{
    background-color: #008325;
    border-radius: 5px;
    padding: 30px;
    color: #f2f2f2;
}

section {
    padding: 15px;
}

input[type="text"], textarea, input[type="email"] {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    margin: 2px;
    border: 1px solid #ccc; /* 统一输入框边框，避免浏览器默认样式差异 */
}

input[type="submit"] {
    padding: 12px 20px; /* 优化按钮左右内边距，提升视觉效果 */
    border-radius: 5px;
    border: none;
    background-color: #005e1b;
    color: #f2f2f2;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #008325;
}

额外说明 #

• 原代码中header的margin: none无效，正确写法是margin: 0，全局样式重置后已覆盖该设置。
• 给输入框添加默认边框，可让表单样式更统一，消除不同浏览器的默认样式差异。

内容的提问来源于stack exchange，提问作者Shrey