应优先使用 span 等原生内联元素而非修改 p 的 display 属性，因 p 具有段落语义，改 display 会破坏可访问性、SEO 和默认间距；span 语义中立、无副作用，flex 布局则是保留语义并实现同行的现代方案。
直接用 span 或其他原生内联元素，比给 p 加 display: inline 更安全、语义更清晰——除非你明确需要段落语义却又要并排显示，否则别动 p 的 display。
为什么不能随便改 p 的 display 属性
把 p 设成 inline 或 inline-block 看似能“一行显示”，但会破坏其语义和默认行为：
-
p是语义化段落标签，屏幕阅读器、SEO、可访问性工具都依赖它表达文本结构；改成inline后，段落边界消失，辅助技术可能跳过换行逻辑或误读为连续短句 - 浏览器对
p有默认上下外边距（margin-top/margin-bottom），设为inline后这些 margin 失效，垂直间距失控，还得手动重置 - 若父容器是 flex 或 grid，
p虽仍是块级，但会受容器规则影响；而强行设display: inline可能与容器的align-items或justify-content冲突，导致基线对齐异常
span 是最轻量且无副作用的替代方案
当你要的是“视觉上同行、内容上无段落语义”，span 就是标准解法：
-
span默认就是内联元素，不换行、不占宽、不带 margin，完全符合“不破坏文档流”的前提 - 它允许设置
margin-left/margin-right、padding、font等样式，控制灵活 - 多个
span并列写在一行 HTML 中，天然同行；哪怕中间有空格或换行，渲染时也自动合并空白符，不影响布局 - 示例：
<span class="label">用户名：</span><span class="value">admin</span>
—— 不需要任何 CSS 就能同行，且语义中立
需要保留段落语义？用 display: inline-block + 显式重置 margin
极少数场景（比如 CMS 输出固定含 p 的富文本，又必须横向排列），才考虑保留 p 标签本身：
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置：
display: inline-block+margin: 0（或至少margin-top: 0; margin-bottom: 0） - 注意：
inline-block元素间的 HTML 换行/空格会产生间隙，可用font-size: 0在父容器上消除，或让 HTML 中的p标签紧挨着写（<p>A</p><p>B</p>） - 避免用
float：它会让元素脱离文档流，父容器容易塌陷，还需额外清除浮动，已属过时方案 - 不要依赖
vertical-align默认值：inline-block默认按 baseline 对齐，文字底部不齐；建议统一设vertical-align: top或middle
真正现代、可扩展的方案是 flex 容器 + 语义化子元素
如果目标是“多个区块同行”，别在单个元素上硬调 display，而是升级父容器布局方式：
- 给父容器加
display: flex，子元素（哪怕是p）自然横向排列，且仍保持各自块级语义和默认 margin - 用
gap控制间距，比手动设margin更干净，且不会出现 margin 折叠问题 - 响应式友好：
flex-wrap: wrap+ 媒体查询，小屏自动换行，无需改 HTML 结构 - 示例：
<div style="display:flex; gap:1rem;"><p>第一段</p><p>第二段</p></div>
最容易被忽略的是语义与样式的边界：用 span 不等于“偷懒”，它是有意选择中立语义；而给 p 强加 inline 是在透支 HTML 的语义信用。真正稳定的布局，从来不是靠压扁元素，而是靠选对容器和层级。
