当使用 display: inline-block 布局图文并排内容时，图片尺寸变化会意外推动相邻元素下移——根本原因在于 inline-block 元素默认按基线（baseline）对齐，而非顶部对齐。
当使用 `display: inline-block` 布局图文并排内容时，图片尺寸变化会意外推动相邻元素下移——根本原因在于 `inline-block` 元素默认按基线（baseline）对齐，而非顶部对齐。
在传统行内布局中，inline-block 元素（如
和 ）会被视为“行内盒子”，其垂直对齐方式遵循文本排版规则：默认以 baseline 对齐。这意味着，即使两个容器逻辑上彼此独立，只要它们处于同一行流中，浏览器就会将它们的基线强制对齐。
而 作为替换元素（replaced element），其基线默认位于图片底部向上约 4px 的位置（模拟字母“g”、“y”的下伸部分）。当你增大图片高度（例如从 150px 调整为 250px）， 的整体行盒（line box）高度随之增加，基线位置被重新计算并下移；此时，与之同行的 #content（同为 inline-block）为保持基线对齐，也会被动下移——这正是你观察到“左侧内容被推下去”的本质原因。
✅ 推荐解决方案：改用 flexbox 布局
Flexbox 天然规避了基线对齐陷阱，提供可控、可预测的轴向排列能力。只需将两个兄弟容器包裹在一个新父容器中，并启用 display: flex：
.flex-wrapper { display: flex; flex-direction: row; /* 水平排列 */ flex-wrap: wrap; /* 支持响应式换行（可选） */ align-items: flex-start; /* 关键！确保顶部对齐，避免默认 stretch */ }对应 HTML 结构需调整为：
<div class="flex-wrapper"> <div id="content"> <h1>Hi! I'm Andri Quin</h1> <h2>Student Web Developer</h2> <div id="content2"> <p>Im a student aspiring to be a fullstack web developer...</p> </div> </div> <span id="pic"> <img src="letter-a.png" alt="Profile icon"> </span> </div>⚠️ 注意事项与进阶提示：
- 不要仅依赖 vertical-align 临时修复（如设 vertical-align: top），它虽能缓解问题，但未根治 inline-block 的行盒依赖缺陷，且在复杂嵌套或字体变化时易失效；
- 若需兼容旧版 IE（
- align-items: flex-start 显式声明顶部对齐至关重要——若省略，flex-start 是默认值，但显式书写可提升代码可读性与维护性；
- 避免在 Flex 容器内混用 margin-top 或 margin-left 进行定位；应优先使用 gap（推荐）、justify-content / align-items 或 margin 在子项上微调间距。
? 总结：inline-block 的基线对齐机制是许多“莫名位移”问题的元凶。拥抱 Flexbox 不仅能一劳永逸解决图文错位，还能显著提升布局的健壮性与响应能力。重构时只需新增一层语义清晰的包装容器，并添加 3–4 行 CSS，即可获得专业级、可扩展的双栏布局。