仅使用HTML和CSS移除含空白字符的空div.abc的实现问题

目前有两种纯HTML/CSS的方案可以解决这个问题，覆盖不同的浏览器兼容需求：

方案1：使用CSS第四代选择器:blank（推荐，兼容性覆盖大部分现代浏览器） #

:blank是CSS选择器Level 4新增的伪类，专门用于匹配仅包含空白字符（空格、换行符、制表符等）的元素，正好适配你的需求。
代码示例：

div.abc { 
  border: 1px solid red; 
  height:50px; 
}
/* 同时兼容完全空和仅含空白的情况 */
div.abc:is(:empty, :blank) {
  display: none;
}

兼容性说明：Chrome 105+、Firefox 110+、Safari 16.4+均原生支持，覆盖90%以上的全球用户流量。

方案2：兼容旧版浏览器的纯CSS Hack #

如果需要适配更早的浏览器版本，可以通过样式消去空白内容的占位效果，等价于隐藏：

div.abc { 
  border: 1px solid red; 
  height: fit-content; /* 替换原来的固定高度，由内容撑高 */
  /* 新增规则：空白字符不占空间 */
  font-size: 0;
  line-height: 0;
  padding: 0;
  border: none;
}
/* 存在实际内容时恢复正常样式 */
div.abc:not(:empty) :is(*, ::first-line) {
  font-size: 16px; /* 替换为你的实际字号 */
  line-height: 1.5; /* 替换为你的实际行高 */
  color: #000;
}
/* 有实际内容时恢复边框和内边距 */
div.abc:has(> *),
div.abc:not(:empty)::first-line {
  border: 1px solid red;
  padding: 8px; /* 替换为你的实际内边距 */
}
/* 保留完全空元素的隐藏规则 */
div.abc:empty {
  display: none;
}

该方案的核心逻辑是把仅含空白的元素的占位尺寸、边框全部消去，视觉上完全隐藏，不需要依赖JS逻辑。

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