在html中两个间加空行最简单有效的方法是插入标签；若需精确控制间距或响应式适配，则推荐使用css的margin属性并统一设置vertical-align以避免基线错位。
HTML 中两个 <input> 之间怎么加空行
直接在两个 <input> 标签之间加一个 <br> 最简单有效。浏览器默认把 <input> 当作行内元素，不换行也不自动留白，所以视觉上紧贴着——这不是 bug，是预期行为。
常见错误现象：
写成这样，看起来没空行：
<input type="text"><input type="text">或者加了普通空格、换行符（HTML 里这些会被合并为一个空格）。
-
<br>是最轻量、语义最干净的解法，不引入额外样式或布局逻辑 - 如果用
<p></p>或<div></div>包裹，会多一层块级容器，可能触发 margin、line-height 等意外影响 - 别用
CSS 的 margin 方案更适合可控布局
当需要精确控制间距（比如统一 16px）、响应式适配，或者多个表单控件成组排列时，margin 比 <br> 更可靠。
立即学习“前端免费学习笔记（深入）”；
Foundation5参考手册 中文chm版
下载
Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。本文给大家带来Foundation5参考手册，需要的朋友们可以参考下！
使用场景：表单字段较多、需适配移动端、后续可能加 label 或验证提示。
- 给第二个
<input>加margin-top: 1em（推荐相对单位，避免固定像素在缩放时失效） - 或者给所有
input统一设margin-bottom: 1em，最后一个用:last-child清掉，避免底部多余空白 - 注意：IE8 及更早版本不支持
:last-child，如需兼容，改用 class 控制
为什么不用 <pre class="brush:php;toolbar:false;"></pre> 或 <textarea></textarea> 模拟空行
有人试过把换行写进 <pre class="brush:php;toolbar:false;"></pre> 里，或者用 <textarea></textarea> 替代 <input>，这会偏离语义和交互预期。
问题本质：空行是布局需求，不是内容需求。
-
<pre class="brush:php;toolbar:false;"></pre>会保留空白符并应用等宽字体，破坏表单一致性 -
<textarea></textarea>是多行编辑控件，有 resize 手柄、默认滚动、不同键盘行为（比如 Enter 换行），和单行输入逻辑冲突 - 两者都会让辅助技术（如屏幕阅读器）误判控件类型
容易被忽略的细节：表单控件的 vertical-align
即使加了 <br> 或 margin，如果两个 <input> 高度不一致（比如一个带 type="date"，一个普通 text），它们的基线可能错位，看起来“空得不整齐”。
- 默认
vertical-align: baseline，会让文字底部对齐，但控件内部渲染高度不同 - 统一设
vertical-align: middle或vertical-align: top能解决视觉错位 - 这个属性只对行内/替换元素生效，所以对
<input>有效，但对display: block的元素无效
<br> 和 margin 并不互斥；多数情况先用 <br> 快速验证，再根据是否需要复用、响应、可维护，决定是否抽离为 CSS 规则。真正麻烦的从来不是加一行空白，而是加完发现 label 对不齐、焦点框被截断、或者在 Safari 里 margin 合并了——这时候才需要回头检查 vertical-align 和父容器的 line-height。 
