内联元素需通过 display 转换解决布局限制：当设宽高/上下 margin 无效、垂直对齐错乱或父容器塌陷时，可选 inline-block（并排可控）、block（独占一行）或 flex/grid（需子项布局），同时注意 HTML 换行空格问题及语义标签合理使用。
内联元素（如 <span></span>、<a></a>、<strong></strong>）默认不响应宽高、上下 margin 和垂直对齐等布局属性，容易导致父容器高度塌陷、对齐错乱或样式失效。最直接有效的解决方式，就是用 display: block（或 inline-block、flex 等）将其转为块级或弹性结构，从而获得完整控制权。
什么时候必须改 display？
以下情况说明内联元素已干扰布局，需主动干预：
- 给
<span></span>设置了height或width，但完全没效果 - 上下
margin-top/margin-bottom不生效，文字位置“卡死”不动 - 多个内联元素在一行中无法垂直居中（比如和图片混排时基线错位）
- 父容器高度为 0，检查发现子元素全是内联且无其他块级内容
display 常见转换方案及适用场景
不是所有场景都适合 block，按需选择更稳妥：
-
display: inline-block：保留行内流特性，又能设宽高、上下 margin。适合按钮、标签、图标文字组合等需要并排又需独立控制的元素 -
display: block：强制独占一行，完全获得块级控制权。适合将语义内联元素（如<em></em>）临时当布局单元用，但要注意换行影响 -
display: flex或display: grid：当该元素本身要承载子项布局时（比如把<span></span>当成容器），直接升级为弹性/网格容器，比单纯设 block 更强大
小心 inline 元素的“隐形空格”问题
多个 inline 或 inline-block 元素写在 HTML 换行处，浏览器会把换行符渲染成一个空格，造成意外间隙。解决方法有几种：
立即学习“前端免费学习笔记（深入）”；
- HTML 中写成
<span></span><span></span>连写（不换行） - 父容器设置
font-size: 0，子元素再单独设字体大小 - 用
float: left（兼容老项目）或改用flex布局彻底规避
语义与样式分离的小提醒
别为了布局强行改变语义标签的默认行为。例如：<strong></strong> 是强调文本，不是按钮；<a></a> 是链接，不是卡片容器。如果频繁需要 display: block，建议检查是否该用 <div> 或 <code><button></button> 等更合适的标签，再通过 class 控制样式——结构清晰，后期维护也轻松。
基本上就这些。改 display 是 CSS 布局中最基础也最常被忽略的一环，理解内联元素的限制，再选对转换方式，大部分“布局不听使唤”的问题就迎刃而解了。
