含图片的.welcome-container区块底部出现多余空白的CSS布局问题求助

问题根因 #

你遇到的空白间隙是行内替换元素的默认基线对齐特性导致的：.welcome-container 内的<img>标签默认是行内元素，会遵循文本基线对齐规则，浏览器默认会在基线下方预留出适配西文下伸字母（比如p、q）的空间，这部分空间就是你看到的图片下方和.welcome-container底部之间的多余空白，最终表现为两个区块之间的间隙。

可用解决方案（任选其一即可） #

• 方案1：将图片转为块级元素，直接消除行内元素的基线对齐逻辑
  给img标签添加样式：

  .welcome-container img {
    display: block;
  }
  

• 方案2：修改图片的垂直对齐规则，避开基线对齐
  给img标签添加样式：

  .welcome-container img {
    vertical-align: bottom; /* 也可以替换为top、middle，效果一致 */
  }
  

• 方案3：将父容器的字体大小设为0，消除基线预留空间（适合父容器内仅包含图片无其他文本的场景）
  给.welcome-container添加样式：

  .welcome-container {
    font-size: 0;
  }
  

内容的提问来源于stack exchange，提问作者Anthony S.