Spacing

Learn how to use our spacing helpers to make margin and padding management easier.

Spacing Utilities

Dracula UI ships with two spacing utilities that help you define padding and margin for your websites and apps. While not required, the utility css classes and the p and m properties (for React components), help remove the burden of having to manage your own spacing classes, properties and variables.

Padding

The padding css utility classes and p React property can help manage padding for your components and html elements.

Padding 
<div class="drac-box drac-bg-pink drac-p-md">
  <div class="drac-box">
    <span class="drac-text drac-line-height drac-text-black">Padding</span>
  </div>
</div>
<Box p="md" color="pink">
  <Box>
    <Text>Padding</Text>
  </Box>
</Box>;

Add the p property at the top level of any Dracula UI react component for easy and type safe padding management. For HTML only websites, apply the .drac-p css utilty classes directly into your code.

padding sm
padding y sm
padding x sm
mixing all styles 
<div class="drac-box">
  <div class="drac-box drac-bg-pink drac-p-sm">
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black">padding sm</span>
    </div>
  </div>
  <div class="drac-box drac-bg-purple drac-py-sm">
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black"
        >padding y sm</span
      >
    </div>
  </div>
  <div class="drac-box drac-bg-red drac-px-sm">
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black"
        >padding x sm</span
      >
    </div>
  </div>
  <div
    class="drac-box drac-bg-purple-cyan drac-pt-sm drac-pb-md drac-pl-lg drac-pr-xxs"
  >
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black"
        >mixing all styles</span
      >
    </div>
  </div>
</div>
<Box>
  <Box p="sm" color="pink">
    <Box>
      <Text>padding sm</Text>
    </Box>
  </Box>
  <Box py="sm" color="purple">
    <Box>
      <Text>padding y sm</Text>
    </Box>
  </Box>
  <Box px="sm" color="red">
    <Box>
      <Text>padding x sm</Text>
    </Box>
  </Box>
  <Box pt="sm" pb="md" pl="lg" pr="xxs" color="purpleCyan">
    <Box>
      <Text>mixing all styles</Text>
    </Box>
  </Box>
</Box>;

Margin

Similar to the padding helpers, the margin css utility classes and m React property can help manage margin for your components and html elements.

margin sm
margin y sm
margin x sm
mixing all styles 
<div class="drac-box">
  <div class="drac-box drac-bg-pink drac-m-sm">
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black">margin sm</span>
    </div>
  </div>
  <div class="drac-box drac-bg-purple drac-my-sm">
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black"
        >margin y sm</span
      >
    </div>
  </div>
  <div class="drac-box drac-bg-red drac-mx-sm">
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black"
        >margin x sm</span
      >
    </div>
  </div>
  <div
    class="drac-box drac-bg-purple-cyan drac-mt-sm drac-mb-md drac-ml-lg drac-mr-xxs"
  >
    <div class="drac-box">
      <span class="drac-text drac-line-height drac-text-black"
        >mixing all styles</span
      >
    </div>
  </div>
</div>
<Box>
  <Box m="sm" color="pink">
    <Box>
      <Text>margin sm</Text>
    </Box>
  </Box>
  <Box my="sm" color="purple">
    <Box>
      <Text>margin y sm</Text>
    </Box>
  </Box>
  <Box mx="sm" color="red">
    <Box>
      <Text>margin x sm</Text>
    </Box>
  </Box>
  <Box mt="sm" mb="md" ml="lg" mr="xxs" color="purpleCyan">
    <Box>
      <Text>mixing all styles</Text>
    </Box>
  </Box>
</Box>;

Utility Classes and Properties

Here's a full list of all CSS classes and React properties.

PaddingMargin
.drac-p-none.drac-m-auto
.drac-p-xxs.drac-m-none
.drac-p-xs.drac-m-xxs
.drac-p-sm.drac-m-xs
.drac-p-md.drac-m-sm
.drac-p-lg.drac-m-md
.drac-px-none.drac-m-lg
.drac-px-xxs.drac-mx-auto
.drac-px-xs.drac-mx-none
.drac-px-sm.drac-mx-xxs
.drac-px-md.drac-mx-xs
.drac-px-lg.drac-mx-sm
.drac-py-none.drac-mx-md
.drac-py-xxs.drac-mx-lg
.drac-py-xs.drac-my-auto
.drac-py-sm.drac-my-none
.drac-py-md.drac-my-xxs
.drac-py-lg.drac-my-xs
.drac-pt-none.drac-my-sm
.drac-pt-xxs.drac-my-md
.drac-pt-xs.drac-my-lg
.drac-pt-sm.drac-mt-auto
.drac-pt-md.drac-mt-none
.drac-pt-lg.drac-mt-xxs
.drac-pb-none.drac-mt-xs
.drac-pb-xxs.drac-mt-sm
.drac-pb-xs.drac-mt-md
.drac-pb-sm.drac-mt-lg
.drac-pb-md.drac-mb-auto
.drac-pb-lg.drac-mb-none
.drac-pl-none.drac-mb-xxs
.drac-pl-xxs.drac-mb-xs
.drac-pl-xs.drac-mb-sm
.drac-pl-sm.drac-mb-md
.drac-pl-md.drac-mb-lg
.drac-pl-lg.drac-mr-auto
.drac-pr-none.drac-mr-none
.drac-pr-xxs.drac-mr-xxs
.drac-pr-xs.drac-mr-xs
.drac-pr-sm.drac-mr-sm
.drac-pr-md.drac-mr-md
.drac-pr-lg.drac-mr-lg

Styling with regular CSS

Regular styling with CSS, inline styles, and custom classes are still, for the cases where the Dracula UI spacing system can't cater to your needs.

Feel free to mix and match whatever styling strategy makes sense for your project.