{"id":362044,"date":"2022-01-25T15:10:20","date_gmt":"2022-01-25T23:10:20","guid":{"rendered":"https:\/\/css-tricks.com\/?p=362044"},"modified":"2022-01-27T20:14:27","modified_gmt":"2022-01-28T04:14:27","slug":"component-spacing-design-system","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/component-spacing-design-system\/","title":{"rendered":"How Do You Handle Component Spacing in a Design System?"},"content":{"rendered":"\n

Say you’ve got a <Card \/><\/code> component. It’s highly likely it shouldn’t be butted right up against any other components with no spacing around it. That’s true for… pretty much every component. So, how do you handle component spacing in a design system?<\/p>\n\n\n\n

Do you apply spacing using margin directly on the <Card \/><\/code>? Perhaps margin-block-end: 1rem; margin-inline-end: 1rem;<\/code> so it pushes away from the two sides where more content natural flows? That’s a little presumptuous. Perhaps the cards are children inside a <Grid \/><\/code> component and the grid applies a gap: 1rem<\/code>. That’s awkward, as now the <Card \/><\/code> component spacing is going to conflict with the <Grid \/><\/code> component spacing, which is very likely not what you want, not to mention the amount of space is hard coded.<\/p>\n\n\n\n\n\n\n\n

\"Example
Adding space to the inline start and block end of a card component.<\/figcaption><\/figure>\n\n\n

Different perspectives on component spacing<\/h2>\n\n\n

Eric Bailey got into this recently<\/a> and looked at some options:<\/p>\n\n\n\n