1

我有一个关于垂直节奏缩放线高的问题。我将在下面的示例中使用像素，只是为了让事情变得更容易。假设这是我的 p-tag 的基本结构：

p {
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 30px;
}

现在在这种情况下，我将节奏单位设置为 30px。所以，问题一：这是否意味着我的元素之间的垂直间距需要是 30 的倍数，我的行高需要是 30 的倍数。对吗？

我的第二个问题是，你如何调整间距，所以顶部比底部更多？假设我想制作一个边缘底部小于顶部的 h2。如何在不破坏垂直节奏的情况下正确缩放？

4

1 回答 1

0

现在在这种情况下，我将节奏单位设置为 30px。所以，问题一：这是否意味着我的元素之间的垂直间距需要是 30 的倍数，我的行高需要是 30 的倍数。对吗？

差不多就是这样，是的。

我的第二个问题是，你如何调整间距，所以顶部比底部更多？假设我想制作一个边缘底部小于顶部的 h2。如何在不破坏垂直节奏的情况下正确缩放？

只需将视为您设置为基本单位h2的倍数“高度” 。line-height使用 margin-top 和 margin-bottom 来细化 的间距，h2直到它看起来不错“对眼睛来说。参见：

30 line
30 line
30 p margin-bottom
15 h2 margin-top
40 h2
5  h2 margin-bottom
30 line
30 line
etc

（所以所有的 h2 部分加起来是 60，或 2x30）

和CSS：

p {
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 30px;
}
h2 { // consider this really as a unit of 60 (30x2)
  font-size: 40px;
  margin-top: 45px; // = 15+30 (*see below)
  margin-bottom: 5px;
}

*margin-top 不只是 15，因为我们必须补偿 margin-collapse：

https://www.w3.org/TR/CSS21/box.html#collapsing-margins

最后的评论：不要太担心让你所有的工作都符合一个固定的模式。在某些情况下，僵化的模式对读者来说过于“僵硬”。因此，也许在临床公司环境中这可能是合适的，但是当我们尝试为有机农场网站做同样的事情时，它太死板了，最终在视觉上完全不合适。

如果我们真的是优秀的设计师，那么我们就像爵士鼓手一样，有能力在节拍之后演奏，并且在必要时这样做。

希望这会有所帮助。

于 2018-06-28T10:49:00.943 回答