网页设计中的基线网格是一个需要的学术难题，但从硬编码的数学角度来看大多是不切实际的。由于 CSS 没有类型基线的概念，因此在技术上不可能使基线匹配。

你可以接近间隔，但最终你会得到一些在查看数字时可能有意义的东西，但很可能在视觉上是偏离的，你最终会偏离公式以确保事情看起来正确。

所以，总而言之，视觉节奏很重要，但要从你的直觉中构建它，而不是一些只会让你疯狂地在网络上正确实施的方程式。

顺便说一句，请注意基线网格的概念来自印刷设计的世界......特别是多栏布局，例如在报纸中，您希望将类型从一列排到另一列作为首选项。为了便于排版这种出版物，基线网格是有意义的，并且在 DTP 应用程序的世界中相对容易实现。

垂直节奏并不难实现，特别是如果您从CSS 重置开始。前段时间我偶然发现了这个链接http://24ways.org/2006/compose-to-a-vertical-rhythm ，并且从那以后在我的所有设计中都使用了该技术。

我发现，在我的 CSS 文件（h1 - h6、p 等 - 特别是大小、行高、下边距）中使用了一组“固定”类型声明后，部署起来非常容易。

这是一张背景图片，它帮助我看清了一些东西……尤其是当我第一次使用 vert 节奏时。

可能很难看到，但是当它作为背景图像重复时：你会看到一个 20x20 的网格。

高温高压

注意：我更喜欢使用这种技术的网站的排版，而不是那些没有使用的网站。然而，在这两种情况下，似乎总是有一两个元素必须“欺骗系统”才能看起来“正确”。我还发现注意整体行高（比如 18px 用于 12px 字体基础）可以非常直接地设置图像、图形标题等的边距和填充（18px）。另外...计算一切的冲动消失了...您将开始注意到布局的“垂直节奏”，并且能够从非常短的值列表中提取正确的填充/边距/行高在你的脑海里。

Smashing Magazine 上这篇关于基线和垂直节奏的非常好的文章让您深入了解基线在网页设计中的重要性以及如何在您的 CSS 中实现它们。它在默认 html 元素上使用字体大小、行高、填充和边距，以使每个元素都与您的基线网格对齐。

正如 Dawson 建议的那样，为了帮助将所有内容与网格匹配，背景图像非常有用。

我一直在为我最近的几个设计采用这种技术，我认为它真的有回报。