spacing.md

Spacing Module

Methods for applying spacing styles to React components.

import { View } from "tile-css"

const SpacedCard = View()
  .size(200)
  .padding({ x: 20, y: 15 }) // left, right: 20px -- top, bottom: 15px
  .margin(10, { right: 0 }) // 10px around, except right
  .element();

export const CardWithSpacing = ({ children }) => (
  <SpacedCard>{children}</SpacedCard>
);

• Shortcut Methods
  • margin
  • padding
  • space

Shortcut Methods

margin(options: number | string | BoxSides, override?: BoxSides)

Applies margin to an element.

Apply 10px margin on all sides:

.margin(10)

Apply 10px margin on all sides except right side, which gets 5px:

.margin(10, { right: 5 })

Apply 10px margin on left and right, 5px on top and bottom:

.margin({ x: 10, y: 5 })

padding(options: number | string | BoxSides, override?: BoxSides)

Applies padding to an element.

Apply 15px padding on all sides:

.padding(15)

Apply 20px padding on left and right, 10px on top and bottom:

.padding({ x: 20, y: 10 })

Apply 10px padding on all sides except top, which gets 25px:

.padding(10, { top: 25 })

space(options: SpacingOptions)

The space function is the primary method for applying comprehensive spacing styles.

SpacingOptions:

• gap?: string | number: Sets the gap between flex/grid items
• inner?: string | number | BoxSides: Sets padding
• outer?: string | number | BoxSides: Sets margin

Create an element with 10px gap between flex/grid items, 20px padding on all sides, and 30px margin on all sides:

.space({ gap: 10, inner: 20, outer: 30 })

Create an element with 1rem gap, 20px horizontal padding, 10px vertical padding, 30px top margin, and 15px bottom margin:

.space({
  gap: '1rem',
  inner: { x: 20, y: 10 },
  outer: { top: 30, bottom: 15 }
})