假设你有一个<Card /> 的组件。它很可能不应该紧靠着任何其他组件，周围没有任何间隔。这对......几乎所有的组件都是如此。那么，你如何在设计系统中处理组件的间距？
你是否直接在<Card /> ？也许margin-block-end: 1rem; margin-inline-end: 1rem; ，这样它就会从更多内容自然流动的两边推开？这有点自以为是。也许卡片是一个<Grid /> 组件内的孩子，而网格应用了一个gap: 1rem 。这就很尴尬了，因为现在<Card /> 组件的间距将与<Grid /> 组件的间距相冲突，这很可能不是你想要的，更不用说空间的大小是硬编码的。
在卡片组件的内联开始和块状结束处添加空间。
关于组件间距的不同观点
Eric Bailey最近研究了这个问题，并看了一些选项。
- 你可以在每一个组件中加入间距，并尽量巧妙地处理它。(但这是很有局限性的）。
- 你可以传入组件间距，比如
<Card space="xxl" />。（这可能是一个好方法，可能需要一个以上的道具，甚至可能每个方向都有一个，这就很啰嗦了。） - 你可以不使用组件的间距，而专门为组件之间的间距创建一个类似
<Spacer />或<Layout />的组件。(它很好地打破了组件的工作，但也可能是冗长的，并增加了不必要的DOM重量)。
这场对话有广泛的观点，有些极端的观点如Max Stoiber说永远不要使用margin 。这对我来说有点教条主义，但我喜欢它试图重新思考问题。我确实喜欢把间距和布局的工作从组件本身移开的想法--比如说，那些内容组件应该完全不关心它们在哪里被使用，而让布局发生在它们的上面。
Adam Argyle几年前曾预言，随着gap 的使用上升，CSS中的margin 的使用会下降。他的预测很可能是正确的，尤其是现在，flexbox已经成为gap，而开发者也有了在宏观和微观层面上使用CSS Flexbox和Grid的欲望。
