Styles: Spacing
Follow this spacing section to ensure spacing is consistently used across all Plant Parents products.
Quick Summary
Spacing Units: Use px to set margins and padding.
Text Spacing: Add appropriate spacing to each text element based on it's typography
rules outlined in the Typography section.
Image Spacing: Use a 25px margin to separate images from other elements. When
designing a photo grid, ensure each image has 25px spacing between itself and the next.
Component Spacing: Always use consistent element spacing of 25px with all website
components.
Spacing Examples: View on
Codepen.
Spacing Units
When adding spacing rules to website elements, use px to set margins and padding.
Text Spacing
When using text elements, make sure to add appropriate spacing to separate each text block depending on the type of text element. When styling text elements, please also refer to the Typography section of this design system.
Image Spacing
When using images in a Plant Products web product, use a minimum of 25px between images and other elements. If you are adding spacing to a grid of photos, set the left-padding and bottom-padding of the grid container to 25px, then add a top and right margin of 25px to each image's individual container. When implementing image elements, please also refer to the Images section of this design system.
Component Spacing
When building a complex web page with multiple elements, ensure spacing is consistent amongst all elements, and allow for space on all sides of each element.
Spacing Examples
The following is an example of some common website elements implemented with the spacing guidelines listed in this section. View on Codepen.
This is an h3 Heading
This is a paragraph element introduction to the images you're about to see.
