StylingPadding

Padding

Box component supports multiple props for controlling an element’s padding.

Name

Value

Pixels

 

0

2

4

6

8

10

12

16

20

24

32

40

48

64

80

#

Documentation

#

Usage

Use the space scale to set the padding of elements.

p=32

p=12

p=16

p=24

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box p="32">p=32</Box>
      <Box p="12">p=12</Box>
      <Box p="16">p=16</Box>
      <Box p="24">p=24</Box>
    </Canvas>
  );
}

#

Multiple sides

p=24

px=24

py=24

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box p="24">p=24</Box>
      <Box px="24">px=24</Box>
      <Box py="24">py=24</Box>
    </Canvas>
  );
}

#

Single side

pt=12

pr=16

pb=24

pl=32

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box pt="12">pt=12</Box>
      <Box pr="16">pr=16</Box>
      <Box pb="24">pb=24</Box>
      <Box pl="32">pl=32</Box>
    </Canvas>
  );
}
MarginZ-Index