figcaption 默认有上下外边距导致与图片间出现空隙，需设 margin: 0 清除；其宽度可能塌陷，应给 figure 显式设 width: 100%；vertical-align 对块级 figcaption 无效，居中宜用 flex 或 text-align；语义上需确保图注简洁完整、强关联图片，避免冗余内容影响无障碍与 SEO。
figcaption 总是紧贴 figure 底部，但默认有上下外边距
浏览器对 figcaption 会施加默认的 margin-top 和 margin-bottom（通常约 1em），导致它和图片之间出现意外空隙。这不是 bug，而是规范行为——figcaption 是块级元素，且语义上是“图注”，不是内联标签。
常见错误现象：图片紧贴 figcaption 上方，但下方却空出一大段，看着像没对齐。
- 用
figure { margin: 0; }清除父容器默认边距 - 用
figcaption { margin: 0; }彻底移除外边距（最直接有效） - 若需保留一点间距，改用
padding-bottom控制 figure 内部留白，更可控
figure 内部图片宽高不设限时，figcaption 宽度会塌陷
figure 默认是块级容器，但内部没有内容撑开宽度时，figcaption 可能只占文字本身宽度，看起来“缩在左边”。尤其当图片设置了 width: 100% 或使用响应式布局时，这个问题更明显。
使用场景：响应式文章页、CMS 输出的图文混排内容。
立即学习“前端免费学习笔记（深入）”；
- 给
figure加display: block; width: 100%;显式声明宽度 - 图片用
max-width: 100%; height: auto;，避免溢出同时保持比例 - 不要依赖
figcaption自动继承父宽——它只继承figure的 content box 宽度，而该宽度可能未定义
垂直居中图片+图注时，别用 vertical-align
vertical-align 只对 inline-level 元素（如 img、span）生效，而 figure 和 figcaption 都是块级元素。强行加 vertical-align: middle 到 img 上，对整体布局无影响。
性能/兼容性影响：旧版 IE 对 flex 布局支持弱，但现代项目基本可放心用。
- 用
figure { display: flex; flex-direction: column; align-items: center; }同时居中图片与图注 - 若需兼容 IE10+，可用
text-align: center+img { display: block; margin: 0 auto; } - 避免把
figcaption设为inline-block再配vertical-align——语义错、维护难、换行易出问题
无障碍与 SEO 场景下，figcaption 文字必须与图片强关联
搜索引擎和读屏软件依赖 figcaption 理解图片上下文。如果里面塞了无关链接、冗余标点或空格，会导致语义断裂。Chrome DevTools 的 Lighthouse 会因此扣分。
容易踩的坑：CMS 导出时自动插入 或空 span；前端用 JS 动态注入图注却忘了更新 aria-labelledby。
-
figcaption内容应简洁、完整、独立成句，例如 “图 3：用户登录流程时序图” - 避免纯数字编号（如 “3.”），不带说明；也不要用 “如下图所示” 这类指代模糊的表达
- 如果图注含链接，确保链接文本本身有意义（不写 “点击这里”，而写 “查看完整架构图”）
figcaption 的默认外边距和语义完整性——前者让视觉节奏失控，后者让内容在自动化工具里“失语”。这两处不动手，其他样式调得再精细也白搭。 
