Negative Spacer Pattern
What is it?
The negative spacer pattern is used to remove the space between blocks and overlap blocks. Often blocks will have “built in” padding and margins, and sometimes it would be preferred to overlap the blocks.
Example variations below
Functionality
For Styling you can:
Change the “negative” height
For Content population you can:
N/A
Negative Spacer Pattern Demo
The example below shows two equal height groups with different background colours. The negative spacer is placed between the two and creates “negative” space between the two groups, which has the effect of moving the second group up so that it overlaps with the first group. This can be useful to give more control over the spacing between blocks.