如何用CSS和HTML将父容器设为内容高度减X像素？

核心诉求实现：保留行间距，消除文本上下额外空白 #

你要的效果本质是让文本首行上方、末行下方没有line-height带来的额外空白，但行与行之间保留正常间距。最可靠的实现方式是结合line-height和负margin：

步骤说明 #

假设你的字体大小是16px，想要的行间距（两行之间的距离）是4px：

1. 给#content设置line-height: 20px（字体大小 + 目标行间距），这样行与行之间自然会有4px的间距；
2. 给#content设置上下负margin，值为(line-height - 字体大小)/2，也就是2px——这一步会抵消首行上方和末行下方的额外空白，总高度刚好减少4px；
3. 此时#wrapper在正常流下，高度会自动等于#content的实际高度减去4px，完全符合你的布局要求。

代码示例 #

#wrapper {
  /* 正常流布局，无需绝对/固定定位 */
  background-color: #f0f0f0; /* 方便直观查看高度变化 */
}

#content {
  font-size: 16px;
  line-height: 20px; /* 行间距 = 20px - 16px = 4px */
  margin: -2px 0; /* 上下各抵消2px，总高度减少4px */
}

其他可选思路（局限性说明） #

• 伪元素尝试：用::first-line和::last-line调整行高的方式不可靠，因为line-height是作用于整行的，且不同浏览器对伪元素的行高支持不一致，实际效果不稳定；
• calc()控制高度：如果#content的高度可以提前确定，也可以给#wrapper设置height: calc(#{content高度} - 4px)，但这种方式不适合内容高度动态变化的场景，灵活性不如负margin方案。

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