添加内边距/边框后.form-wrapper内容超出div边界的问题求助

嘿，这俩问题其实都是CSS盒模型的经典“踩坑点”，我帮你一步步拆解解决：

问题1：添加内边距后div内容超出容器范围 #

这是因为CSS默认的盒模型是content-box——元素设置的width只代表“内容区域”的宽度，当你给容器加上padding和border后，元素的总宽度会变成 width + padding + border，自然就超出原本的容器范围了。

修复方案： #

给容器加上box-sizing: border-box，让width属性直接包含padding和border的宽度：

.your-div-class {
  width: 300px; /* 这个宽度现在包含padding和border */
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 关键属性 */
}

问题2：.form-wrapper的输入框跑到div边界外 #

这个问题本质和上面一样，大概率是输入框的宽度设置了100%，但输入框本身默认带有padding和border。在content-box模型下，输入框的总宽度会是父容器内容宽度 + 自身padding + 自身border，直接撑破父容器的边界。

修复方案： #

给输入框也加上box-sizing: border-box，同时确保父容器也正确设置盒模型：

.form-wrapper {
  width: 400px;
  padding: 15px;
  border: 1px solid #000;
  box-sizing: border-box; /* 父容器先搞定盒模型 */
}

.form-wrapper input {
  width: 100%; /* 现在这个100%会包含自身的padding和border */
  padding: 8px;
  border: 1px solid #ddd;
  box-sizing: border-box; /* 给输入框加上这个 */
}

额外小技巧： #

如果你不想每个元素都手动加box-sizing，可以全局设置，一劳永逸：

* {
  box-sizing: border-box;
}

这样所有元素都会默认使用border-box模型，基本能避免绝大多数这类布局溢出问题。

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