关于为垂直韵律缩放行高的技术咨询

问题一：韵律单位为30px时，元素垂直间距和行高是否都需为其倍数？ #

你的理解基本正确，但可以再细化一下具体的实践逻辑：

• 元素间的垂直间距：确实应该是韵律单位（这里的30px）的整数倍。垂直韵律的核心就是让页面的垂直节奏规整统一，比如段落的margin-bottom、标题的margin-top/bottom这类间距，都用30px、60px这类倍数设置，不同元素堆叠时视觉上会更和谐，不会出现杂乱的垂直空隙。
• 行高的处理：基础段落的行高30px刚好等于韵律单位，这是最贴合韵律的状态——每行文字的基线间距完美对齐韵律网格。但遇到不同字号的元素时，行高不一定必须是30px的倍数，但要保证最终的基线对齐韵律。比如24px的标题，行高设为30px（刚好匹配韵律单位）或者60px（两倍韵律单位）都可以，这样标题的文字基线依然能和其他元素的基线保持统一节奏；但如果行高设为35px这种非倍数，文字基线就会偏离网格，破坏整体垂直韵律感。

举个适配的代码例子：

/* 基础段落 */
p {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 30px;
}

/* 标题适配韵律 */
h2 {
  font-size: 24px;
  line-height: 30px; /* 对齐韵律单位 */
  margin-bottom: 30px; /* 间距为韵律倍数 */
}

延伸补充：常见的垂直韵律适配思路 #

如果你的第二个问题是关于不同字号元素如何适配韵律，这里给你几个实用方向：

• 大字号元素（如标题）：行高设为韵律单位的整数倍，同时调整内边距或外边距，确保元素整体高度（内容+内边距+外边距）是韵律单位的倍数，避免破坏上下元素的间距节奏。
• 小字号元素（如辅助文本）：行高可以设为30px（完整韵律单位），保证基线对齐；如果想更紧凑，行高也可以用15px（半倍韵律单位），但必须让它的上下外边距是30px的倍数，维持整体韵律。
• 绝对避免使用非韵律单位的垂直间距，比如margin-bottom:25px这类值，会直接打破页面的垂直节奏。

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