Question

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

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

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

我的第二个问题是，你如何间隔，所以顶部有更多可以说比底部更多？让我们说我希望得到一个h2，其余额低于它的顶部。如何在不打破垂直节奏的情况下正确缩放？

Answer 1

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

是的，是的。

我的第二个问题是，您如何分级放置间距，以便有更多空间可以说，比底部高？假设我想做一个h2 谁的保证金底部小于顶部。我如何正确缩放不会破坏垂直节奏吗？

只需将h2设为您设置为基本单位的line-height的“高度”即可。使用上边距和下边距缩小h2的间距，直到看起来“不错”为止。Cf。：

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;
}

*保证金顶部不只是15，因为我们必须补偿保证金崩溃：

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

最后一条评论：不要太担心让您的所有作品都符合既定模式。在某些情况下，刚性模式会向读者过度“僵化”。因此，也许在临床公司环境中这可能是适当的，但是当我们尝试对有机农场网站进行相同操作时，它过于僵化，最终在视觉上完全不合适。

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

希望这会有所帮助。

缩放垂直节奏的线高

1 个答案: