如何将.rect元素高度设置为字符盒的最大尺寸？

问题说明 #

现有HTML结构：

<div>
  Ag<div class="rect"></div>
</div>
<div>
  Ag<div class="rect"></div>
</div>

需要让.rect元素顶部对齐字符升部（如示例中的A）、底部对齐字符降部（如示例中的g），完全匹配字符的最大盒尺寸。原方案用行高+ 存在三个问题：需保证div高度与局部行高一致、 属于冗余内容、行高可能与实际字符尺寸不符。

替代方案1：纯CSS无冗余内容实现 #

CSS代码 #

/* 重置父元素行高为默认值，避免额外间距干扰 */
div {
  line-height: normal;
}
.rect {
  display: inline-block;
  width: 10rem;
  /* 1em 对应字体的em-square高度，刚好覆盖字符的升部+降部范围 */
  height: 1em;
  /* 对齐到字符顶部，确保元素上下边界完全匹配字符盒 */
  vertical-align: text-top;
  background-color: red;
}

对应HTML（无需修改，保持原结构） #

<div>
  Ag<div class="rect"></div>
</div>
<div>
  Ag<div class="rect"></div>
</div>

替代方案2：自适应宽高比版本 #

如果不需要固定宽度，可通过aspect-ratio自定义宽高比例，核心逻辑和方案1一致：

div {
  line-height: normal;
}
.rect {
  display: inline-block;
  aspect-ratio: 8 / 1; /* 可根据需求调整宽高比 */
  height: 1em;
  vertical-align: text-top;
  background-color: red;
}

方案优势 #

• 完全去除冗余的 ，HTML结构保持简洁
• 用1em作为高度，直接匹配字体的原生字符盒尺寸，不会出现行高与实际字符不匹配的问题
• 通过vertical-align: text-top精准对齐字符边界，无需依赖父元素行高的额外设置

内容的提问来源于stack exchange，提问作者Green 绿色