Question

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

希望更清楚地解释一下，我可以说我有这样一个页面：

<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之间的50px。介绍中的p具有较大的行高，导致额外的像素被添加到div之间的空间。内容中的标题也有不同的行高，可以在其顶部添加像素。由于线高，将50px以上的边距放在50px以上。什么是处理这个的最好方法？

Answer 1

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

那就是说，如果你真的想要50px，那就是数学。让我们假设您使用相对单位作为行高。

.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中第一段文字的行高。

Answer 2

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

在您的内容类中：

.content {
  padding-top:50px;
}

就这么简单！现在它将内容div降低50px。希望这是你想要的！

我对行高和边距感到困惑

2 个答案: