4.0.5 • Published 5 years ago

@rebass/space v4.0.5

Weekly downloads
913
License
MIT
Repository
github
Last release
5 years ago

@rebass/space

React component for applying responsive margin and padding to child elements without a wrapping HTML container. Built with Styled System.

npm i @rebass/space
import React from 'react'
import Space from '@rebass/space'

// Apply margin to child components without a wrapping <div>
const App = props => (
  <Space mx={3} my={[ 2, 3 ]}>
    <h1>Hello</h1>
    <h2>Hi</h2>
    <button>Beep</button>
  </Space>
)

Props

The Space component uses Styled System's space utility to add margin and padding props.

PropDescriptionType
mmarginnumber, string, or array
mtmargin-topnumber, string, or array
mrmargin-rightnumber, string, or array
mbmargin-bottomnumber, string, or array
mlmargin-leftnumber, string, or array
mxmargin x-axis (left and right)number, string, or array
mymargin y-axis (top and bottom)number, string, or array
ppaddingnumber, string, or array
ptpadding-topnumber, string, or array
prpadding-rightnumber, string, or array
pbpadding-bottomnumber, string, or array
plpadding-leftnumber, string, or array
pxpadding x-axis (left and right)number, string, or array
pypadding y-axis (top and bottom)number, string, or array

MIT License