CSS GUIv0.0.247DocsPropertiesGitHubLog inSign up

Space

Space refers to margin and padding controls. In order to keep things as simple as possible early on, we recommend that you use the longhand version.

import { useState } from 'react'
import { Editor, Inputs, styled, codegen } from '@compai/css-gui'

export const SpaceExample = () => {
  const [styles, setStyles] = useState({
    marginTop: { value: 16, unit: 'px' },
    marginRight: { value: 16, unit: 'px' },
    marginLeft: { value: 16, unit: 'px' },
    marginBottom: { value: 16, unit: 'px' },
    paddingTop: { value: 16, unit: 'px' },
    paddingRight: { value: 16, unit: 'px' },
    paddingLeft: { value: 16, unit: 'px' },
    paddingBottom: { value: 16, unit: 'px' },
  })

  return (
    <div>
      <Editor styles={styles} onChange={setStyles}>
        <Inputs.MarginTop />
        <Inputs.MarginRight />
        <Inputs.MarginBottom />
        <Inputs.MarginLeft />
        <Inputs.PaddingTop />
        <Inputs.PaddingRight />
        <Inputs.PaddingBottom />
        <Inputs.PaddingLeft />
      </Editor>
      <div sx={{ border: 'thin solid', borderColor: 'border', mt: [3, 4, 5] }}>
        <styled.p styles={{ ...styles, border: 'thin solid' }}>
          Fun with space!
        </styled.p>
      </div>
      <pre>{codegen.css(styles)}</pre>
      <hr />
      <pre>{JSON.stringify(styles, null, 2)}</pre>
    </div>
  )
}
Margin bottom
Margin left
Margin right
Margin top
Padding bottom
Padding left
Padding right
Padding top

Fun with space!

.css-gui-element {
  padding-right: 1rem;
  padding-left: 1rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-right: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
{
  "marginTop": {
    "value": 1,
    "unit": "rem"
  },
  "marginBottom": {
    "value": 1,
    "unit": "rem"
  },
  "marginLeft": {
    "value": 1,
    "unit": "rem"
  },
  "marginRight": {
    "value": 1,
    "unit": "rem"
  },
  "paddingTop": {
    "value": 1,
    "unit": "rem"
  },
  "paddingBottom": {
    "value": 1,
    "unit": "rem"
  },
  "paddingLeft": {
    "value": 1,
    "unit": "rem"
  },
  "paddingRight": {
    "value": 1,
    "unit": "rem"
  }
}

Padding/Margin Shorthand

If desirable, you can also use the spacing shorthand to target all directions at once.

import { useState } from 'react'
import { Editor, Inputs, styled, codegen } from '@compai/css-gui'

export const SpaceExample = () => {
  const [styles, setStyles] = useState({
    margin: { value: 16, unit: 'px' },
    padding: { value: 16, unit: 'px' },
  })

  return (
    <div>
      <Editor styles={styles} onChange={setStyles}>
        <Inputs.Margin />
        <Inputs.Padding />
      </Editor>
      <div sx={{ border: 'thin solid', borderColor: 'border', mt: [3, 4, 5] }}>
        <styled.p styles={{ ...styles, border: 'thin solid' }}>
          Fun with space!
        </styled.p>
      </div>
      <pre>{codegen.css(styles)}</pre>
      <hr />
      <pre>{JSON.stringify(styles, null, 2)}</pre>
    </div>
  )
}