display: inline元素设width/height和margin-top/margin-bottom无效，是css规范定义的行为：其只参与行框布局，尺寸由内容、font-size和line-height决定，不生成独立盒模型；改用inline-block可保留同行特性并启用完整盒模型。
为什么display: inline元素设width/height和margin-top/margin-bottom无效
这不是浏览器 bug，是 CSS 规范明确定义的行为：span、a、strong 这类纯内联元素只参与「行框（line box）」布局，不生成独立盒模型。它们的尺寸由内容、font-size 和 line-height 共同决定；你写的 width、height、margin-top、margin-bottom 在 Computed 面板里通常被划掉，padding-top/padding-bottom 虽然能设，但不会撑开空间，背景色也覆盖不到那块区域。
用display: block能解决，但要清楚它改了什么
display: block 确实让宽高、上下 margin 全部生效，但它会强制元素独占一行——这意味着原本和文字并排的 span 会突然换行，可能打乱整个段落或导航栏结构。
- 适合场景：强调词需独立成行（如标题中加粗短语）、操作按钮需脱离文本流单独控制高度/间距
- 不推荐场景：标签、徽章、关键词高亮等必须保留在当前行内的元素
- 副作用：多个
block元素垂直堆叠，若没设margin容易粘连；父容器若无其他块级内容，仍可能塌陷
比起block，inline-block才是更常用的解法
多数时候你真正需要的不是“换行”，而是“能设宽高+保持同行”。display: inline-block 正好满足这点，且 IE8+ 全面支持，无需 hack。
- 它让元素获得完整盒模型：所有
width、height、padding、margin都生效 - 默认
vertical-align: baseline，常导致和文字底部对不齐，建议显式写vertical-align: middle或top - HTML 源码中的换行/缩进会被渲染为约 4px 空隙，可用父容器
font-size: 0+ 子元素重置font-size消除 - 替换元素（如
img）设inline-block后，vertical-align才真正可控
别忽略line-height和vertical-align的连锁影响
即使改成 inline-block，如果父容器有 line-height，而子元素又没设 vertical-align，视觉上仍可能错位或留白。尤其混排文字和图标时，vertical-align 的取值（middle、top、text-bottom）比宽高本身更容易引发调试时间浪费。
真正麻烦的往往不是“怎么让宽高生效”，而是生效之后，它和周围文字、图片、行高之间的对齐关系突然变得不可预测——这些细节比改一个 display 值更消耗精力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
