表单控件默认 box-sizing: content-box，导致 padding 和 border 撑大宽度；fieldset/legend 盒模型特殊；input 等 display: inline-block 使垂直 margin 无效；响应式中需谨慎处理 padding 与 width 冲突。
表单元素默认遵循标准盒模型，但部分控件（如 input、select、textarea）的渲染受浏览器 UA 样式和 box-sizing 影响极大——不显式设置 box-sizing: border-box，几乎必然导致布局错位或响应式失效。
为什么表单控件的 padding 和 border 会“撑大”宽度
因为绝大多数表单控件默认使用 box-sizing: content-box。当你写 width: 100% + padding: 8px + border: 1px solid #ccc，实际占用宽度是 100% + 16px + 2px，超出父容器。
- 所有现代浏览器对
input、select、textarea的 UA 样式都设为box-sizing: content-box，哪怕你没写任何 CSS -
button元素在部分旧版 Chrome 中甚至默认用border-box，造成跨控件行为不一致 - 解决方式不是靠猜，而是统一重置：
*:where(input, select, textarea, button) { box-sizing: border-box; }
fieldset 和 legend 的盒模型特殊性
fieldset 是唯一自带「边框包裹语义分组」的表单容器，它的 border 和 padding 直接影响内部控件的可用空间；而 legend 会破坏 fieldset 的上边框，且自身不参与常规盒模型尺寸计算。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
fieldset默认有border和padding，但它的width计算不含legend占据的额外高度 -
legend渲染位置由fieldset的border-top“切开”，它本身没有margin合并行为，但会强制撑高fieldset - 若需精确控制表单宽度，建议给
fieldset设max-width，并用padding替代margin控制内部间距
表单控件的 margin 合并不起作用？
不是不起作用，而是多数表单控件（input、select、button）默认为 display: inline 或 inline-block，垂直方向的 margin 被忽略——这是行内级元素的固有行为，和盒模型无关，但常被误认为“盒模型失效”。
-
input[type="text"]、select等默认display: inline-block，所以margin-top/margin-bottom不影响文档流垂直位置 - 想用
margin控制垂直间距，要么改display: block，要么统一用padding（更推荐，避免意外换行） - 如果必须保留
inline-block，可用vertical-align: top/middle/bottom对齐，再配合line-height微调
响应式表单中 padding 和 width 的冲突点
当用百分比 width + 固定 padding 时，小屏下 padding 占比陡增，内容可操作区域急剧缩水；而用 rem 或 em 做 padding 又可能和字体缩放耦合过紧。
- 移动端优先方案：用
padding-inline: clamp(8px, 4%, 16px)（注意兼容性，iOS Safari 16.4+ 支持） - 降级方案：媒体查询中单独调整
padding，例如@media (max-width: 480px) { input { padding: 6px 8px; } } - 绝对不要对
input同时设width: 100%和padding却不设box-sizing: border-box，这是最常见布局崩坏源头
真正麻烦的从来不是盒模型本身，而是表单控件在不同浏览器中对 box-sizing、display、vertical-align 的隐式继承差异——这些细节不会报错，但会让同一段 CSS 在 Chrome/Firefox/Safari 中呈现三种宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
