HTML/CSS如何消除元素间多余间距 精准设置margin-top:10px

设置margin-top: 10px后间距超出预期，额外空间来自两个非margin/padding的来源：

• 浏览器默认给文本元素设置的line-height值在1.2~1.5区间，大于字形实际高度，差值会平分在文本上下，形成固定额外间距
• 字体文件设计时自带上下预留空间（为升部、降部字符预留位置），即使行高设为1，这部分内置度量空间依然存在，大字号下会格外明显
  如果直接给嵌套的<h2>设置margin-top，还会触发父元素margin穿透，进一步导致间距计算偏差。

按以下步骤设置即可精准实现10px的固定间距：

• 给所有标题元素设置line-height: 1，消除默认行高产生的半行距额外空间
• 给大字号标题设置小数值负margin，抵消字体本身的内置上下留白，数值可根据Roboto字体的实际渲染效果微调
• 间距直接加在两个同级块元素之间，避免给嵌套子元素加margin导致的穿透问题

CSS部分 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.title {
  font-family: Roboto;
  font-size: 41px;
  font-weight: 900;
  text-transform: uppercase;
  color: #f9bf3b;
  text-align: center;
  /* 消除默认行高带来的上下额外空间 */
  line-height: 1;
  /* 直接在h1底部加10px间距，避免子元素margin穿透 */
  margin-bottom: 10px;
}
.simple .title_big {
  font-family: Roboto;
  font-size: 80px;
  font-weight: 900;
  text-transform: uppercase;
  color: #000000;
  text-align: center;
  line-height: 1;
  /* 负margin抵消Roboto 80px字号下的顶部内置留白，可根据实际渲染微调数值 */
  margin-top: -7px;
}

HTML部分（原有结构无需修改） #

<h1 class="title">Text 1</h1>
<div class="simple">
  <h2 class="title_big">its simple!</h2>
  <div class="line"></div>
</div>
<h2 class="title">Text 2</h2>

如果只需要调整行高带来的空白，直接修改line-height属性即可。如果需要彻底裁剪字体自带的内置留白，现代浏览器支持leading-trim、text-edge两个CSS属性实现精准裁剪，但目前兼容性较差，生产环境优先使用line-height搭配小数值负margin的方案，兼容性最好，调整精度也足够。

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