<picture>是纯语义容器，不参与渲染流；内部<img>默认仍为inline，受基线影响导致文字错位、底部留白，须显式设vertical-align: middle或display: block，若父容器为flex则需用align-items: center。
为什么 里套 ![HTML中picture标签与普通img标签共存时的排版调优]()
后文字还是错位、有空白
因为 <img>。但这个 <img> 默认仍是 display: inline，照样受基线（baseline）影响，下方留白、和文字不对齐——和直接写 <img> 一模一样。
常见现象：文字紧贴图片底部、出现几像素空隙、图标“吊着”、flex 布局中 <img> 不垂直居中。
- 别指望
<picture>自动修正对齐，它连 display 都不继承 -
<img>必须显式设vertical-align: middle或display: block才能消除 baseline 空隙 - 若父容器是
display: flex，<img>的vertical-align无效，得靠align-items: center - HTML 源码里
<picture>和文字之间的换行符会生成空格，造成不可见但可测量的间隙
如何让 + 文字在一行且间距可控
最稳方案是绕过行内布局陷阱，用 display: flex 统一控制。关键不是改 <picture>，而是改它的**父容器**。
- 给包裹
<picture>和文字的<div>设display: flex; align-items: center; gap: 8px -
<picture>本身不用设任何 display，保持默认即可 - 里面的
<img>加flex-shrink: 0，防止小屏下被压缩变形 - 文字部分用
flex-grow: 1占满剩余空间，或用min-width: 0防止长单词撑破布局 - 避免对
<picture>设float或vertical-align—— 它们不生效
响应式图文混排时 的 sizes/srcset 怎么不干扰文字流
sizes 和 srcset 只影响资源加载逻辑，不影响布局尺寸。但如果你没给 <img> 设宽高，浏览器无法预估占位，会导致文字重排（layout shift）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须带width和height属性（非 CSS），哪怕只是占位值，如width="400" height="225" - 如果用
srcset+w描述符，sizes必须写在<img>上，且值要和实际 CSS 宽度一致（比如sizes="100vw"对应width: 100%） - 别在
<source>上写sizes—— 浏览器直接忽略 - 移动端文字环绕
<picture>？别试。float 对<picture>无效，必须作用于内部<img>，但此时 DPR 切换可能失效
多个 并排时容易漏掉的关键约束
并排不是把几个 <picture> 往 div 里一塞就完事。它们各自独立，但共享父容器的布局上下文，稍不注意就错行、溢出、高度不齐。
- 用
display: grid替代浮动或 inline-block：设grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))+gap - 每个
<picture>内部的<img>要加width: 100%; height: auto，否则原始尺寸差异导致高度参差 - 若配了
<figcaption>，必须包在<figure>里，且<figure>设display: flex; flex-direction: column，否则<figcaption>强制换行 - IE11 不支持
<picture>，fallback 的<img src>必须能独立渲染，不能依赖<picture>的样式继承
真正难调的不是语法，而是 <picture> 在不同布局模型中的“隐身性”：它不占空间、不响应对齐、不继承 display，所有样式都得落到内部 <img> 上，且不能和 media 查询、DPR 切换逻辑冲突。
