图片上下文本对齐异常求助：下方文本间距过大

嘿，我来帮你搞定这个图片上下文本对齐的困扰！从你描述的情况来看，顶部文本已经紧贴图片，但底部文本有较大间距，大概率是容器行高、元素默认margin或者图片基线对齐导致的，给你几个实用的解决方案：

方案1：用Flex布局（推荐，现代浏览器友好） #

Flex布局能轻松实现垂直方向的紧密排列，直接调整你的CSS即可：

div.igallery {
  margin: 2px;
  float: left;
  width: 60px;
  /* 启用垂直方向的flex布局 */
  display: flex;
  flex-direction: column;
  gap: 0; /* 移除元素间的默认间隙 */
}

div.igallery img {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* 确保图片不超出容器宽度 */
  height: auto;
}

div.idesc {
  font-size: 10px;
  padding: 2px;
  text-align: center;
  margin: 0; /* 去掉div可能继承的默认margin */
  line-height: 1.2; /* 按需调整行高，避免文本自身间距过大 */
}

方案2：传统CSS方案（兼容旧浏览器） #

如果需要兼容老浏览器，可以用行高控制来消除间隙：

div.igallery {
  margin: 2px;
  float: left;
  width: 60px;
  line-height: 0; /* 消除容器内的基线间隙，避免图片下方留白 */
}

div.igallery img {
  display: block;
  margin: 0 auto;
}

div.idesc {
  font-size: 10px;
  padding: 2px;
  text-align: center;
  margin: 0;
  line-height: normal; /* 恢复文本的正常行高 */
}

排查小技巧 #

如果还是有间距，建议打开浏览器开发者工具（按F12），选中图片或底部文本元素，查看盒模型面板，看看间距是来自margin、padding还是其他继承的样式，针对性调整即可。

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