为什么仅给inline-block的文本添加padding时，相邻图片会同步发生位移？

问题根因 #

inline-block元素默认的vertical-align属性值为baseline，你设置的padding-top实际已经生效，但整个p元素会和图片的基线对齐，因此视觉上看不到文本向下偏移的效果。

解决方案 #

方案1：修改inline-block的垂直对齐规则 #

给p标签添加vertical-align: top，让元素以顶部为基准对齐，此时padding-top就会按照图片顶部的位置向下计算偏移量。你的图片高度为67px，要实现文本在图片高度3/4处对齐，设置padding-top为50px左右即可。
代码示例：

<img src="img" alt="Image" width="100" height="67"/>
<p style="display: inline-block; vertical-align: top; padding-top: 50px;">Test</p>

方案2：使用Flex布局（更稳定） #

给图文外层包裹一个flex容器，无需设置inline-block属性，直接通过外边距控制文本偏移，兼容性更好且不会出现基线对齐的异常问题。
代码示例：

<div style="display: flex; align-items: flex-start;">
  <img src="img" alt="Image" width="100" height="67"/>
  <p style="margin-top: 50px;">Test</p>
</div>

内容的提问来源于stack exchange，提问作者Vulpeeze