网页设计字体和图片等用户界面组件的间距、大小和尺寸都是影响整个版面美观的重要因素，这些也是设计中经常被忽视的核心元素之一，适当的空间组织有助于实现屏幕、页面甚至产品之间的一致性。它还创造了视觉节奏，限制了决策，并有助于实现更好的可读性和可扫描性。
它是网页设计设计系统的强制性部分，因为它有助于创造视觉节奏，创造一致的产品，并减少设计师每天做出的决定。空间系统通常由四个基本要素组成:基本单元、空间比例、网格，有时还包括布局。我们可以假设这很可能是网站上的授权表单。第一种布局在间距上有些不一致，没有明确的垂直节奏。然而，当我们看第二个布局时，一切似乎更清楚了。是因为所有的元素都调整到8pt的空间体系，所以垂直节奏变得可预测，清晰。当一个设计没有一个立即可识别的空间模式时，用户可能会发现它不一致和不可靠。
网格提供了元素布局的结构，而空间系统定义了使用间距和大小的规则。早期的印刷设计师使用网格将文本块和图像组织成令人愉悦的视觉层次，以获得更好的可读性和可扫描性。同样的基本原则也适用于网页和界面设计。列网格是网页和界面设计中最流行的网格。它有助于将内容组织成间距均匀的垂直列，并在它们之间设置间距。模块化网格通过向列网格添加行来扩展列网格。它帮助我们将内容组织成矩阵结构，因此对于电子商务、画廊或卡片布局非常有帮助。
基线网格是由等距水平线组成的密集网格。正如我之前提到的，它来自平面设计，所有的文本都沿着基线垂直流动，创造出相似的节奏。为了对齐此网格上的所有元素，所有间距和尺寸都必须是线间距值的倍数。为了做到这一点，我们需要创建一个清晰的空间系统。让我们从一个基本单元开始。
当我们选择了一个基本单位并定义了一个空间尺度时，我们可能会有一个问题:如何正确地使用它？让我们弄清楚。众所周知，空间比例适用于边距、填充和尺寸。对于宽度或高度，我们只是从空间尺度设置一个值。如果我们不能预测组件的内容，只设置高度或宽度是可以的，所以它将拥抱内容并动态拉伸。但是有了边距和填充，事情就变得更复杂了。看下图。如您所见，有三种类型的间距:内部间距、垂直间距和水平间距(或称行内间距)。
