为何font-size不等于高度？如何实现像素级对齐的价格布局

核心问题分析 #

直接将左侧大字号设为右侧小字号2倍却无法对齐高度，本质是字体内置度量（上升部ascender、下降部descender）和默认行高的影响——不同字体的字母上下留白比例不同，单纯调整font-size无法让元素高度严格匹配。

实现像素完美布局的关键技巧 #

1. 统一字体与消除额外行高

首先确保左右容器使用同一款字体，避免不同字体的度量差异；同时设置line-height: 1，消除默认行高带来的额外垂直空间，让元素高度更贴近font-size。

2. 用固定高度对齐容器

通过给右侧grid容器设置与左侧大字号相等的高度，配合grid的行分配，让两行小文本的总高度严格匹配左侧大文本高度。

3. 精准控制间距

用flex/grid的gap属性直接控制容器间和内部元素的间距，无需额外嵌套或复杂样式。

完整代码示例 #

<div class="price-container">
  <span class="large-number">33</span>
  <div class="small-units">
    <span class="currency">EUR</span>
    <span class="decimal">.49</span>
  </div>
</div>

/* 外层flex容器，对齐底部让数字与小数视觉更协调 */
.price-container {
  display: flex;
  align-items: flex-end;
  gap: 4px; /* 左右容器的间距，可按需调整 */
}

/* 左侧大数字 */
.large-number {
  font-size: 2rem; /* 小字号的2倍 */
  line-height: 1;
  font-family: 'Inter', sans-serif; /* 用度量规整的现代字体 */
}

/* 右侧grid容器 */
.small-units {
  display: grid;
  grid-template-rows: 1fr 1fr; /* 两行均分高度 */
  gap: 1px; /* 两行小文本的间距 */
  font-size: 1rem;
  line-height: 1;
  font-family: 'Inter', sans-serif;
  height: 2rem; /* 与左侧大字号的font-size一致 */
  align-items: center; /* 网格内文本垂直居中 */
}

进阶：基于字体度量的自适应公式 #

如果想让布局适配任意字体，可使用ex单位（基于字体小写字母x的高度）来统一比例，避免固定数值的局限性：

.large-number {
  font-size: 4ex;
  line-height: 1;
}

.small-units {
  font-size: 2ex;
  line-height: 1;
  height: 4ex;
  grid-template-rows: 1fr 1fr;
  gap: 0.2ex;
}

ex单位会随字体变化自动调整，保证高度比例始终一致，实现更通用的像素完美效果。

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