因为span是内联元素（display: inline），其width、height、margin-top/bottom等属性被规范忽略；需改为display: inline-block（保持同行并支持宽高）或display: block（独占一行）才能生效。
为什么 span 设置 width 和 height 没效果？
因为 span 默认是 display: inline，行内元素的宽高由内容决定，CSS 中显式设置的 width、height、margin-top、margin-bottom 都会被忽略。这不是浏览器 bug，而是规范行为。
常见错误现象：给 <span>文字</span> 加了 style="width: 200px; height: 50px; background: red;"，结果背景只包住文字，没撑开。
- 真正生效的是
padding（上下左右都有效，但不会推挤相邻块级元素） -
margin-left/margin-right有效，margin-top/margin-bottom无效 - 想让它有宽高，必须改
display：比如display: inline-block或display: block
display: inline-block 为什么既不换行又能设宽高？
inline-block 是唯一同时继承 inline 排版逻辑和 block 盒模型控制能力的 display 值。它保留了“不强制换行、可并排”的特性，又允许你自由设置 width、height、所有方向的 margin 和 padding。
典型使用场景：导航菜单项、图标按钮组、响应式卡片网格（当不想用 flex/grid 时）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 注意默认有空白间隙：相邻
inline-block元素间会因 HTML 换行/空格产生约 4px 间隙，可用font-size: 0在父容器上消除，或改用注释剔除空白 - 它不自动填满父容器宽度，这点和
block不同——inline-block宽度默认由内容决定 - 在 IE8+ 完全支持，无需前缀；但旧版 IE6/7 需要触发 hasLayout（如加
zoom: 1）
什么时候该用 display: block 而不是 display: inline-block？
当你需要元素独占一行、撑满父容器、或作为布局容器（比如包裹多个子元素并统一控制 padding/margin），block 更直接可靠。强行用 inline-block 反而容易引入意外间隙或对齐问题。
常见误用：把 <div> 改成 display: inline-block 只为让它横向排列，却忘了清除间隙、处理垂直对齐（默认 baseline 对齐，可能造成底部留白）。
-
block元素天然适合做结构容器：<header>、<section>、自定义<div class="card"> - 若需横向排列多个
block元素，优先考虑display: flex或float（已过时但仍有遗留场景），而非硬套inline-block -
vertical-align对block无效，但对inline-block有效——这点常被忽略，导致元素错位
display 切换后，哪些 CSS 属性会“突然生效”或“失效”？
display 值变更本质是切换盒模型类型，直接影响属性是否参与渲染计算。这不是“启用/禁用”，而是浏览器根据 display 类型决定是否读取该属性值。
例如把 <span> 设为 display: block 后：width、height、margin-top、margin-bottom 立刻起效；但若设为 display: table-cell，margin 又全部失效（table-cell 不支持 margin）。
-
display: inline→margin-top/bottom失效，vertical-align生效 -
display: block→vertical-align失效，margin全方向生效 -
display: inline-block→margin和vertical-align都生效，但要注意 baseline 对齐带来的高度偏差 - 所有 display 类型都支持
padding，但inline的上下 padding 不会撑开父容器行高（仅视觉填充）
最易被忽略的是：display 切换可能破坏原有文档流位置或触发新的 BFC/IFC 上下文，尤其在嵌套复杂布局中，display: inline-block 和 display: table 的行为差异比表面看起来更微妙。
