寻求等价尺寸HTML元素统一标题间距，解决隐藏元素构建失败问题

方案1：用opacity: 0实现占位 #

直接给替代的空白元素设置opacity: 0，它会保留原元素的尺寸和布局位置，且几乎不会触发构建工具的校验问题。如果构建工具对空元素有严格检查，可以在元素内加个非换行空格 或空注释：

<!-- 存在目标元素的情况 -->
<div class="your-target-class">实际内容</div>

<!-- 需要占位的情况 -->
<div class="your-target-class" style="opacity: 0;">&nbsp;</div>

opacity: 0只是让元素视觉不可见，文档流中仍会占据对应空间，完全等价于原元素的布局效果。

方案2：CSS伪元素占位（无需额外HTML） #

如果不想添加冗余HTML元素，可以给没有目标元素的父容器加一个标识类，通过CSS伪元素生成占位空间：

/* 先定义原目标元素的尺寸样式 */
.your-target-class {
  width: 120px;
  height: 36px;
  padding: 8px;
}

/* 给无目标元素的父容器加类，生成占位 */
.parent-container.no-target::after {
  content: "";
  display: block;
  /* 完全复制原目标元素的尺寸、内边距等样式 */
  width: 120px;
  height: 36px;
  padding: 8px;
}

用法：

<!-- 有目标元素的父容器 -->
<div class="parent-container">
  <div class="your-target-class">实际内容</div>
</div>

<!-- 无目标元素的父容器 -->
<div class="parent-container no-target"></div>

这种方式更简洁，避免了冗余HTML，也不会触发构建工具对隐藏元素的校验问题。

方案3：避免使用hidden属性，改用aria-hidden+visibility: hidden #

如果必须添加和原元素一致的HTML结构，不要用原生hidden属性（部分构建工具会将带hidden的元素移除或报错），改用aria-hidden="true"配合visibility: hidden，同时确保元素内有内容（比如空注释）：

<div class="your-target-class" aria-hidden="true" style="visibility: hidden;"><!-- 占位 --></div>

aria-hidden用于告知屏幕阅读器忽略该元素，visibility: hidden保证元素保留布局空间，这种组合兼容性好，也不易触发构建错误。

为什么之前的方法会失败？ #

原生hidden属性在一些SSR框架、静态站点生成器中会被视为“可移除元素”，构建时会被过滤或触发校验报错；而如果是给包裹div加visibility:hidden，可能因为包裹div的样式和原元素不一致，导致占位尺寸偏差，同时也可能触发工具对隐藏嵌套元素的检查。

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