CSS如何移除图片与边框间的空隙？hover加box-shadow出现空隙怎么解决

• 行内元素默认对齐特性：<img>属于行内替换元素，默认按照基线（baseline）对齐，底部会预留约4px的空白用于容纳文字下伸部分（如y、g字母的底部），该空白会导致边框/阴影和图片边缘出现间隙。
• box-shadow的生成规则：box-shadow是基于元素的原始盒模型边界生成的，你给图片设置的transform: scale(1.05)仅做视觉缩放，不会改变元素本身的盒模型尺寸，因此缩放后视觉上的图片边缘和原始盒边界之间出现空隙，阴影就会显露出这部分间隙。
• 尺寸适配问题：你给<img>设置了85%的宽高，父容器没有对应限制，也可能导致布局偏移产生额外间隙。

下面提供两种可行的修复方案，可按需选择：

方案1：使用drop-shadow替换box-shadow（改动最小） #

filter: drop-shadow()是基于元素实际渲染的轮廓生成阴影，会跟随缩放、圆角等视觉效果，不会受原始盒模型限制，同时修复img的默认对齐问题即可：

.hover-zoom {
  transition: all 0.3s ease 0s;
  border-radius: 50%;
  overflow: hidden;
  /* 新增以下两行，干掉默认基线空白 */
  display: block;
  vertical-align: middle;
}

.hover-zoom:hover {
  transition: all 0.3s ease-in;
  transform: scale(1.05);
  /* 把box-shadow替换为drop-shadow */
  filter: drop-shadow(rgba(255, 255, 255, 0.5) 0px 8px 50px);
  border-radius: 50%;
}

.img-box{
  display: block;
  margin: 0;
  padding: 0;
}

方案2：父容器承载交互效果（更稳定） #

把缩放、阴影、圆角的逻辑都放到父容器.img-box上，图片仅负责内容展示，避免盒模型和渲染分层的问题：

调整后的CSS #

.img-box{
  display: block;
  margin: 0 auto;
  padding: 0;
  /* 把原来img的85%宽高移到父容器，用aspect-ratio保证正方形 */
  width: 85%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}
/* hover逻辑移到父容器 */
.img-box:hover {
  transform: scale(1.05);
  box-shadow: rgba(255, 255, 255, 0.5) 0px 8px 50px;
  transition: all 0.3s ease-in;
}

.hover-zoom {
  /* 图片填满父容器 */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

调整后的React代码 #

仅需移除img上的hover-zoom类名即可，其余逻辑不变：

<Grid item xs={6}>
  <Paper className={classes.paper}>
    <div className="img-box">
      <img src={earth} />
    </div>
  </Paper>
</Grid>

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