表单空白区域是注意力断点，需通过语义化容器（如.form-group）统一控制margin-bottom节奏，结合fieldset+legend实现逻辑分组留白，禁用br/空div，确保可访问性与响应式一致性。
表单空白区域不是“没内容”，而是用户视线滑过时的注意力断点——它直接拉长完成时间、增加放弃率。关键不在删减，而在控制空白的节奏和意图。
用 margin-bottom 替代 br 或空 div 控制垂直留白
很多人靠连续写 <br> 或塞空 <div></div> 来撑开表单项间距，结果是语义丢失、响应式错乱、CSS 难以统一控制。
- 所有表单项（
<label>+ 对应控件）必须包裹在语义化容器里，比如<div class="form-group"> - 只对
.form-group设置margin-bottom: 1.25rem（推荐值，适配 16px 基准），不依赖内部结构 - 移除所有孤立的
<br>；它们在 flex/grid 布局中完全失效，且无法被屏幕阅读器识别为空白意图 - 移动端可加媒体查询收紧间距：
@media (max-width: 600px) { .form-group { margin-bottom: 1rem; } }
fieldset + legend 是分组留白的语义锚点
当表单有逻辑分段（如“登录信息”“安全设置”），用 fieldset 不仅能视觉分隔，还能让辅助技术感知“此处进入新区域”，比纯 CSS 分割线更可靠。
-
<fieldset>默认带边框和内边距，需重置或微调：border: none; padding: 0;，再用margin-bottom控制组间空白 -
<legend>必须存在，哪怕内容为空（<legend class="visually-hidden"></legend>），否则屏幕阅读器会跳过整个分组 - 避免嵌套
fieldset：超过两层会破坏语音导航流，也难做响应式折叠 - 如果只是视觉分隔无语义分组，用
<hr>或带role="separator"的<div>更轻量
占位符（placeholder）不能替代标签，但能缓解“空白感”
用户看到空输入框第一反应是“该填什么？”，此时占位符是低成本引导，但它不是标签，也不参与可访问性树。
立即学习“前端免费学习笔记（深入）”；
- 每个
<input>必须配<label for="id">，哪怕视觉上隐藏（用visually-hidden类） - 占位符仅用于补充说明格式或示例：
placeholder="john@example.com"，而非重复标签文字 - 占位符文字颜色必须足够对比（至少 4.5:1），且在获得焦点后淡出，避免与用户输入重叠
- 禁用
placeholder做必填提示（如“* 必填”），它会在输入后消失，失去持续提示作用
首屏表单空白要“有呼吸感”，但不能“有空洞感”
首屏加载后，用户眼睛会自然扫视表单顶部区域。如果第一个 <label> 距离视口顶部太近，或字段之间留白突兀，会触发认知停顿。
- 给
<form>或最外层容器设padding-top: 2rem（非margin），确保内容不顶到视口边缘 - 第一个
.form-group不需要额外margin-top，靠父容器内边距承载 - 避免在表单顶部堆砌无关文案或装饰性图片——它们不是“留白”，而是干扰源
- 如果表单上方有标题，用
<h2>而非<div class="title">，并确保其margin-bottom与.form-group的margin-top形成视觉节奏
最难处理的不是空白本身，而是空白背后的意图混淆：用户不确定该看哪里、该填什么、下一步是什么。留白必须服务于这个路径，而不是成为路径上的减速带。
