全局重置 * { margin: 0; padding: 0; } 会破坏表单控件语义化默认间距、跨浏览器渲染不一致、损害可访问性，且无法通过 normalize.css 等方案修复，必须按控件类型显式设置 box-sizing、padding、margin、font-size 等属性，并用固定 css 变量统一控制间距。
直接重置所有表单控件的 margin/padding 并不可靠，必须按控件类型显式声明、配合 box-sizing 和 CSS 变量控制。
为什么全局 * { margin: 0; padding: 0; } 会让表单更糟
它抹除了 button、input、select 等控件的语义化默认间距，但不同浏览器对这些元素的 UA 样式本就不一致：Chrome 给 button 设的是 0.25em 内边距，Firefox 却是 2px；input[type="number"] 在 Safari 有右侧增减按钮占位，清掉样式后若没补 padding-right，文字会贴边。更麻烦的是，这类重置还会干扰可访问性（如屏幕阅读器依赖的默认 focus outline 间距）。
无序列表呈现：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 破坏表单控件与标签的视觉节奏，尤其在
label + input垂直堆叠时，上下空隙忽大忽小 - 清掉
textarea的默认resize边框后，若未设min-height和padding，高度塌陷且文字顶边 - 某些旧版 Safari 对
* { padding: 0; }会错误继承到伪元素，导致::before内容错位
input/select/textarea/button 的间距必须逐个显式定义
不能指望 normalize.css 或 reset.css 搞定——它们不碰表单控件的渲染逻辑。每个控件要单独处理 margin、padding、box-sizing 和 line-height。
无序列表呈现：
-
input、select、textarea、button都得加box-sizing: border-box，否则 Chrome 和 Firefox 对width: 100%是否含padding的解释可能不一致 -
select清掉-webkit-appearance后，必须设padding: 0.5rem 1rem，否则文字紧贴左侧边框 -
textarea要禁用拖拽并统一尺寸：resize: none; min-height: 80px; padding: 0.5rem; -
button的line-height别依赖浏览器默认值（Safari 和旧 Edge 波动大），改用min-height: 36px; padding: 0.375rem 1rem;
用 CSS 变量管间距，但别在 calc() 里动态算
--gap-sm: 0.5rem 这类变量安全，但 margin: calc(var(--gap-unit) * 2) 在 Safari 15.4 之前和 Firefox 90 以下会解析失败。真正可控的做法是把计算收口到定义侧。
无序列表呈现：
- 定义一组固定值：
--space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; - 给表单控件直接用：
margin-bottom: var(--space-md);，而非margin-bottom: calc(var(--space-sm) * 2); - 响应式调整写在媒体查询里：
@media (max-width: 768px) { :root { --space-md: 8px; } }，而不是运行时 JS 注入 - 避免用
em做表单间距单位——button的默认字体大小在各浏览器中不一致，1em实际像素值就漂了
form-group 类容器的间距别只靠 margin-bottom
Bootstrap 的 .form-group { margin-bottom: 1rem; } 在真实项目中常失效，因为 .form-group 常嵌套在 .row（flex 容器）或 .col（带 padding）里，造成 margin 折叠或叠加。
无序列表呈现：
- 优先用相邻兄弟选择器：
.form-group + .form-group { margin-top: var(--space-md); }，首项无上边距，末项无下边距 - 若父容器是 flex/grid，直接用
gap（需确认目标浏览器支持：Chrome 104+、Firefox 103+、Safari 16.4+）：.form-list { display: flex; flex-direction: column; gap: var(--space-md); } - 兼容旧环境时，回退用负边距抵消：
.form-group { margin-bottom: var(--space-md); } .form-group:last-child { margin-bottom: 0; } - 注意
.col自带padding，和.form-group的margin叠加后左右“撑开”，应设.col { padding: 0; }，把内边距全交给.form-group管
最易被忽略的一点：表单控件的 font-size 必须显式声明。不同浏览器对 input 的默认字号不同（Chrome 通常 13.33px，Firefox 是 16px），这会间接影响 rem 和 em 单位的实际像素值，进而让所有基于它的间距偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
