如何去除div元素内部的多余空白？

你遇到的上下空白问题，根源不在外层div，而是来自两个核心点：

1. h1标签的默认margin：浏览器自带的用户代理样式给h1设置了上下外边距，这是空白的主要来源之一
2. 字体的行高与内部间距：大字号字体本身会有默认行高，加上字体设计时自带的上下留白（ascent/descent），也会产生多余空白

解决步骤： #

1. 重置h1的margin为0，消除标签自带的外边距
2. 调整line-height为1（或接近1的数值），减少行高带来的额外空白
3. 可选：若仍有细微空白，可微调line-height至略小于1的数值（如0.95），或配合vertical-align: top进一步对齐

修改后的代码： #

.rover {
  font-family: 'Noto Sans', sans-serif;
  display: flex;
  border: 1px dashed dodgerblue;
  padding: 0;
  margin: 0;
}

.rover-t {
  font-size: 130pt;
  color: rgb(255, 80, 80);
  transition: all 0.5s;
  /* 关键修改项 */
  margin: 0;
  line-height: 1;
}

<div class="rover">
  <h1 class="r rover-t">R</h1>
  <h1 class="o rover-t">O</h1>
  <h1 class="v rover-t">V</h1>
  <h1 class="e rover-t">E</h1>
  <h1 class="r2 rover-t">R</h1>
</div>

补充说明： #

• 移除了div上无用的vertical-align: top，flex容器下该属性不生效
• 不同字体的上下留白差异较大，可根据实际显示效果微调line-height数值

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