行内元素的margin-left和margin-right有效，因CSS规范明确允许其参与行框水平布局计算，影响相邻内容位置；而margin-top/margin-bottom不参与行框高度计算，故垂直方向无效。
行内元素的margin-left和margin-right为什么有效
因为规范明确允许，且它们参与行框（line box）的水平布局计算。浏览器会把margin-left和margin-right加到该行内元素的“占用宽度”中，从而真实影响相邻内容的位置。
常见错误现象：<span>之间用margin-right: 12px分隔，但最后一项右侧多出多余空白；或父容器text-align: center时，整个行被整体居中，导致视觉上间距“不对称”。
-
margin-left会向左推开前一个兄弟元素（或行首），margin-right向右推开后一个兄弟元素（或行尾） - 如果行内元素是行内替换元素（如
<img>、<input>），其margin行为更接近块级——上下也生效，但普通<span>、<a>不适用 - 注意：父容器的
font-size为0时，margin仍存在，但可能因子元素font-size重置而表现异常
为什么margin-top和margin-bottom看起来“没效果”
不是失效，而是不参与行框高度计算。行框高度由line-height、字体度量（ascent/descent）、以及行内替换元素的尺寸共同决定；margin-top/bottom被解析，但被忽略在垂直堆叠逻辑之外。
典型表现：给<strong>加margin-bottom: 30px，下方文字不会下移；加padding-bottom: 30px，背景会拉长，但文字位置也不变——因为padding撑开的是行内盒内部空间，依然不推高行框。
立即学习“前端免费学习笔记（深入）”；
- 想真正拉开两行文字的垂直距离？调
line-height或让其中一项变成display: inline-block -
vertical-align会影响行内元素在行框内的对齐基线，间接改变视觉垂直位置，但它不是margin的替代品 - 若强行需要垂直外距，最可控方案是改用
display: inline-flex或display: inline-grid，此时margin全方向生效
用inline-block替代时要注意什么
把display: inline-block加给原本的行内元素，能让margin四边都生效，但会引入新问题：HTML中的换行符和空格会被渲染成约4px的空白间隙。
- 清除间隙的方法包括：父容器设
font-size: 0，子元素重置font-size；或子元素间不写换行/空格；或用margin-left: -4px抵消（不推荐，脆弱） -
vertical-align: top/middle/bottom必须显式设置，否则默认baseline会导致高度对不齐 - 性能上无明显损耗，但语义轻微偏离——原本纯文本流的结构，变成了“伪块级容器”，需评估可访问性影响
真正需要控制垂直间距时，该选什么
别硬扛margin-top/bottom在行内元素上的限制。直接跳出行框模型更高效。
- 相邻两段文字？用
<p>或<div>包裹，走块级流 + 垂直margin合并逻辑 - 单行内多个图标+文字？用
display: flex父容器 +gap，简洁且无兼容性包袱（现代浏览器全覆盖） - 必须保持行内语义（如富文本编辑器内嵌样式）？用
letter-spacing或word-spacing微调，或靠transform: translateY()做视觉偏移（仅限装饰性调整）
行内元素的垂直间距本质是行框系统的边界，不是margin的缺陷，而是它被设计成的样子。强行绕过，不如换一层抽象去解决。
