HTML中img标签src为空时如何消除对应的占位空白

你可以根据场景选择HTML/CSS方案或者后端代码方案，两种都可以彻底解决占位空白问题：

方案1：纯HTML/CSS处理（无需修改后端代码） #

针对src为空的img以及其父元素设置隐藏规则即可，display: none会让元素完全脱离文档流，不占用任何页面空间：

• 如果你仅需要隐藏空src的img：
  给页面加如下CSS规则即可：

  img[src=""], img:not([src]) {
    display: none;
  }
  

• 如果你的img外层包了a标签（和你示例结构一致），还需要同时隐藏外层a标签：
  先给右侧图片的外层容器加自定义类名比如right-img-container，再添加如下CSS：

  /* 兼容支持:has选择器的现代浏览器 */
  .right-img-container:has(img[src=""], img:not([src])) {
    display: none;
  }
  

方案2：Groovy/Java后端处理（代码更干净无冗余DOM） #

在渲染页面前先判断右侧图片的src值，如果为空/Null/空白字符串，直接不渲染右侧的img及外层所有关联标签，从根源上避免生成多余节点，不会产生任何占位空间：

// Groovy模板渲染伪代码示例
def rightImgSrc = 你的右侧图片地址变量
if (rightImgSrc?.trim()) {
  // 此处输出右侧a标签+img标签的HTML代码
}

补充说明 #

你之前设置宽高为0仍有空白，是因为img默认是行内块元素，会保留基线间距，同时外层的a标签、布局容器可能还有默认的margin、padding、行高等属性占位，用display: none可以彻底规避这类问题。

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