styled-space
React component for applying responsive margin and padding to child elements without a wrapping HTML container.
Built with styled-components and styled-system
npm i styled-space
import React from 'react'
import Space from 'styled-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.
| Prop | Description | Type |
|---|
m | margin | number, string, or array |
mt | margin-top | number, string, or array |
mr | margin-right | number, string, or array |
mb | margin-bottom | number, string, or array |
ml | margin-left | number, string, or array |
mx | margin x-axis (left and right) | number, string, or array |
my | margin y-axis (top and bottom) | number, string, or array |
p | padding | number, string, or array |
pt | padding-top | number, string, or array |
pr | padding-right | number, string, or array |
pb | padding-bottom | number, string, or array |
pl | padding-left | number, string, or array |
px | padding x-axis (left and right) | number, string, or array |
py | padding y-axis (top and bottom) | number, string, or array |
MIT License
