我对行高和边距感到困惑答案

【问题标题】：I'm confused about line-height and margins我对行高和边距感到困惑
【发布时间】：2025-12-24 14:05:07
【问题描述】：

当我设计一个页面时，我会尽量保持平衡。我希望有相同数量的像素分隔每个部分，或者在某些情况下，每个元素。不同的字体大小和行高会让人感到困惑。

希望能更清楚地解释一下，假设我有一个这样的页面：

<div class="intro">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis tellus at neque posuere pellentesque. Donec dui purus, mattis ac consectetur rutrum, mollis id mauris. Curabitur placerat risus sed tellus condimentum, non viverra velit semper. In purus justo, ornare non mollis et, suscipit a diam. Quisque suscipit nisi lorem, eu interdum sapien rhoncus commodo. Donec quis blandit neque. Integer at aliquet dui. Etiam eu dolor feugiat, bibendum purus in, sodales sem.</p>
</div>
<div class="content">
   <h1>Heading goes here</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis tellus at neque posuere pellentesque. Donec dui purus, mattis ac consectetur rutrum, mollis id mauris. Curabitur placerat risus sed tellus condimentum, non viverra velit semper. In purus justo, ornare non mollis et, suscipit a diam. Quisque suscipit nisi lorem, eu interdum sapien rhoncus commodo. Donec quis blandit neque. Integer at aliquet dui. Etiam eu dolor feugiat, bibendum purus in, sodales sem.</p>
</div>

我希望简介和内容 div 之间正好有 50 像素。 intro 中的 p 具有很大的行高，导致额外的像素被附加到 div 之间的空间上。内容中的标题也有一个不同的行高，它在顶部添加了像素。由于 line-height，在内容上方放置 50px 的边距将超过 50px。处理这个问题的最佳方法是什么？

【问题讨论】：

标签： html css

【解决方案1】：

作为现代网络工作流程的一部分，我可能会建议您对像素精度的缺乏感到满意，因为它会出现很多。

也就是说，如果您真的想要 50 像素，那就全靠数学了。假设您使用相对单位来表示行高。

.intro p {
    font-size: 16px;
    line-height: 1.5;
}

现在算术：16 * 1.5 = 24px（行高） 24px - 16px = 8px（去除文字高度后文字上下的总空间） 8px / 2 = 4px（文本上方或下方的空间）

所以要达到 50px 的空间，你可以这样做：

.intro {
    margin-bottom: 46px; // 50px - 4px of line height
}

当然，您还需要考虑.content div 中第一段文本的行高。

【讨论】：

【解决方案2】：

看！在天际之上！这看起来像是一份工作：CSS！你对那个边距部分是对的。如果你想保持简单，试试这个：

在您的内容类中：

.content {
  padding-top:50px;
}

就这么简单！现在它将内容 div 向下推 50px。希望这就是你要找的！

【讨论】：