如何实现容器背景与文本x-height对齐并消除上下空白？

要实现文本x-height顶部与容器顶部贴合、基线与容器底部贴合的效果，可通过以下两种方式实现，均支持响应式布局：

方法一：纯CSS方案（利用ex单位） #

ex单位对应字体的x-height（小写字母x的高度），我们可以通过设置容器高度为1ex，并将标题定位到容器底部来实现对齐：

html,
body {
  padding: 0;
  margin: 0;
}

.o-container {
  width: 80%;
  margin: 4rem auto 0;
  background-color: coral;
  /* 将容器字体大小设置为标题的响应式大小 */
  font-size: clamp(7rem, 4.500000001rem + .0833333333 * 100vw, 12rem);
  height: 1ex; /* 容器高度等于字体x-height */
  position: relative;
  overflow: visible; /* 允许字母的上伸部分（如b、h）和下伸部分（如p、q）超出容器 */
}

.title {
  padding: 0;
  margin: 0;
  font-size: inherit; /* 继承容器的响应式字体大小 */
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  position: absolute;
  bottom: 0; /* 将标题基线与容器底部对齐 */
}

<div class="o-container">
  <h1 class="title">Choosing type</h1>
</div>

原理 #

• 容器高度设为1ex，正好等于字体的x-height；
• 标题绝对定位到底部，使其基线与容器底部重合，此时x-height的顶部自然与容器顶部对齐；
• 响应式通过clamp实现，字体大小随视窗宽度变化时，1ex会自动同步调整。

方法二：JS+CSS方案（精确测量对齐） #

如果需要兼容更多字体或确保跨浏览器精度，可通过JavaScript测量文本实际位置后调整布局：

html,
body {
  padding: 0;
  margin: 0;
}

.o-container {
  width: 80%;
  margin: 4rem auto 0;
  background-color: coral;
  position: relative;
}

.title {
  padding: 0;
  margin: 0;
  font-size: clamp(7rem, 4.500000001rem + .0833333333 * 100vw, 12rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  position: absolute;
}

<div class="o-container">
  <h1 class="title">Choosing type</h1>
</div>

<script>
function adjustTitleAlignment() {
  const title = document.querySelector('.title');
  const container = document.querySelector('.o-container');
  
  // 创建临时span用于测量x-height位置
  const tempSpan = document.createElement('span');
  tempSpan.textContent = 'x';
  tempSpan.style.visibility = 'hidden';
  tempSpan.style.position = 'absolute';
  title.appendChild(tempSpan);
  
  const titleRect = title.getBoundingClientRect();
  const spanRect = tempSpan.getBoundingClientRect();
  
  // 计算标题需要向上偏移的距离，使x的顶部与容器顶部对齐
  const topOffset = titleRect.top - spanRect.top;
  // 设置容器高度为x-height的高度
  container.style.height = `${spanRect.height}px`;
  // 偏移标题，同时确保基线与容器底部对齐
  title.style.transform = `translateY(${topOffset}px)`;
  title.style.bottom = '0';
  
  title.removeChild(tempSpan);
}

// 页面加载和窗口缩放时重新调整
window.addEventListener('load', adjustTitleAlignment);
window.addEventListener('resize', adjustTitleAlignment);
</script>

原理 #

• 通过临时创建的小写字母x，精确测量其在标题中的位置；
• 计算标题需要偏移的距离，使x的顶部与容器顶部重合，基线与容器底部重合；
• 监听窗口缩放事件，确保布局在字体大小变化时保持对齐。

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