如何实现文本短于图片高度时移除图片底部margin，长文本时保留？

要实现文本高度小于图片时移除图片底部margin，文本高度超过图片时保留该margin，推荐以下两种方案：

一、JavaScript方案（兼容所有浏览器） #

通过动态获取图片与文本的高度，判断后调整图片的底部margin，兼容性强且逻辑清晰。

完整代码 #

CSS（保留基础布局）

.box {
  max-width: 300px;
  border: 2px solid red;
  overflow: hidden;
}

.box:after {
  content: "";
  display: table;
  clear: both;
}

img {
  float: left;
  max-width: 50%;
  box-shadow: 0 0 0 20px yellow;
  margin: 0 20px 20px 0; /* 默认保留底部margin */
}

p {
  margin: 0;
  padding: 0;
}

.box+.box {
  margin-top: 25px;
}

HTML（无需修改）

<div class="box">
  <img src="https://picsum.photos/300/150">
  <p>Lorem ipsum dolor sit amit.</p>
</div>

<div class="box">
  <img src="https://picsum.photos/300/150">
  <p>Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit.
    Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit.
    Lorem ipsum dolor sit amit. Lorem ipsum dolor sit amit.</p>
</div>

JavaScript逻辑

// 遍历所有.box容器
document.querySelectorAll('.box').forEach(box => {
  const img = box.querySelector('img');
  const text = box.querySelector('p');

  // 定义调整margin的函数
  const adjustImgMargin = () => {
    const imgHeight = img.offsetHeight;
    const textHeight = text.offsetHeight;
    // 根据高度对比结果设置margin
    img.style.marginBottom = textHeight <= imgHeight ? '0' : '20px';
  };

  // 图片加载完成后执行调整逻辑
  if (img.complete) {
    adjustImgMargin();
  } else {
    img.addEventListener('load', adjustImgMargin);
  }

  // 窗口大小变化时重新调整（适配响应式场景）
  window.addEventListener('resize', adjustImgMargin);
});

原理说明 #

1. 等待图片加载完成后，获取图片与文本的实际渲染高度
2. 对比两者高度：文本高度≤图片高度时，移除图片底部margin；文本高度超过图片时，保留默认的20px底部margin
3. 监听窗口resize事件，确保窗口尺寸变化时仍能正确适配

二、现代CSS方案（需浏览器支持） #

利用CSS :has() 选择器结合CSS变量实现，但仅支持Chrome 105+、Firefox 121+等现代浏览器。

修改后的CSS代码 #

.box {
  max-width: 300px;
  border: 2px solid red;
  overflow: hidden;
  --img-margin-bottom: 20px;
}

.box:after {
  content: "";
  display: table;
  clear: both;
}

img {
  float: left;
  max-width: 50%;
  box-shadow: 0 0 0 20px yellow;
  margin: 0 20px var(--img-margin-bottom) 0;
}

p {
  margin: 0;
  padding: 0;
}

.box+.box {
  margin-top: 25px;
}

/* 当文本高度小于等于图片高度时，重置底部margin */
.box:has(p:is(:empty, :not(:last-child))) {
  --img-margin-bottom: 0;
}

说明 #

通过:has()选择器判断容器内文本的状态，动态修改CSS变量控制图片的底部margin。该方案无需JavaScript，但浏览器兼容性有限，适合现代项目场景。

内容的提问来源于stack exchange，提问作者René M.