如何实现文本高度与div盒子高度一致？

直接设置文本font-size和盒子height为相同值无法达成需求，核心原因是：字体的实际占据高度由**行高（line-height）**决定，默认行高会大于font-size，且文本和盒子的垂直对齐方式默认是基线对齐，导致视觉上高度不匹配。

解决方案一：统一行高与垂直对齐 #

给文本容器设置与盒子高度一致的line-height，同时给两个元素添加垂直对齐属性，确保视觉上高度匹配：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>文本与盒子高度对齐示例</title>
  <style>
    :root {
      font-size: 1em;
    }
    
    .offer {
      font-size: 2rem;
      display: inline-block;
      line-height: 2rem; /* 行高等于盒子高度，消除文本上下额外空间 */
      vertical-align: middle; /* 与盒子垂直居中对齐 */
    }
    
    .box {
      width: 2rem;
      height: 2rem;
      background-color: #990000;
      display: inline-block;
      vertical-align: middle; /* 同步设置垂直对齐 */
    }
  </style>
</head>

<body>
  <header>
    <div class="offer">CARS FOR SALE</div>
    <div class="box"></div>
  </header>
</body>

</html>

解决方案二：使用Flex布局控制对齐 #

通过Flex布局可以更灵活地实现垂直居中，同时确保文本容器高度与盒子一致：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>文本与盒子高度对齐示例</title>
  <style>
    :root {
      font-size: 1em;
    }
    
    header {
      display: flex;
      align-items: center; /* 子元素垂直居中 */
    }
    
    .offer {
      font-size: 2rem;
      height: 2rem; /* 强制容器高度与盒子一致 */
      display: flex;
      align-items: center; /* 文本在自身容器内垂直居中 */
    }
    
    .box {
      width: 2rem;
      height: 2rem;
      background-color: #990000;
    }
  </style>
</head>

<body>
  <header>
    <div class="offer">CARS FOR SALE</div>
    <div class="box"></div>
  </header>
</body>

</html>

关键说明 #

• 字体的font-size只是定义字符的基准大小，实际占据的高度由line-height控制，默认line-height是字体的1.2倍左右，所以必须显式设置line-height与目标高度一致。
• vertical-align: middle用于修正行内块元素的基线对齐问题，确保文本和盒子在垂直方向的中心对齐。

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