行内元素的margin-bottom不触发布局计算，是css规范规定的行为；其垂直空间由line-height和基线决定，需改display为inline-block或block才生效，否则可用padding-bottom、transform或line-height替代。
行内元素的margin-bottom根本不会触发布局计算
这不是 bug，是 CSS 规范明确规定的：<span></span>、<b></b>、<i></i> 这类默认 display: inline 的元素，其 margin-top 和 margin-bottom 被浏览器直接忽略。它们的垂直空间由 line-height 和字体基线决定，不是靠外边距撑开的。
改 display 是最直接有效的解法
只要把行内元素变成能参与块级布局的类型，margin-bottom 就立刻生效。常用两种方式：
-
display: inline-block：保留行内流位置（不换行），同时支持margin、width、height—— 适合文字中局部加间距 -
display: block：强制独占一行，完全按块级盒模型渲染 —— 适合语义上本该是段落级的内容（比如把<b></b>当标题用）
注意：inline-block 元素默认有基线对齐行为，可能产生意外空白；加 vertical-align: top 或父容器设 font-size: 0（再在子元素里重置）可规避。
别踩这些坑
即使改了 display，以下情况仍会让 margin-bottom 看似“失效”：
- 相邻块级元素的
margin-bottom和下一个元素的margin-top发生折叠（collapse），最终只保留较大值 - 父容器高度写死（如
height: 200px），且子元素总高度 +margin-bottom超出限制，溢出部分被裁剪或忽略 - 元素本身浮动（
float: left）且后面没清除浮动，在 IE6/7 中margin-bottom会丢弃（现代浏览器已修复）
折叠问题最常被误判为“无效”，实际它只是按规范合并了 —— 检查开发者工具的 computed 样式，看 margin-bottom 是否真的没被应用，还是被折叠掉了。
不用 display 时的替代方案
如果受限于第三方组件、不能改 display，可用这些绕过方式：
-
padding-bottom：对行内元素完全有效，但会扩大内容区域，影响背景色、边框范围 -
transform: translateY(10px)：纯视觉下移，不改变文档流，不影响其他元素布局 -
line-height调整：适用于单行文本，通过拉高行框间接制造底部空隙
真正难处理的，往往不是怎么加间距，而是加完之后和其他元素的 margin 折叠、父容器约束、书写模式（比如 writing-mode: vertical-rl）混在一起，导致效果不可预测 —— 遇到异常，优先打开 DevTools 看 computed margin 和 layout tab。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
