Spacing - 8px grid base design

External spacing is always greater than internal spacing. This means that as you move out from the center of an item or group, the spacing increases and relationships become more spatially defined. Components have the smallest spacing, then related elements, then groups of related elements, then groups of groups, and so on until all content sections are clearly separate from one another.