Skip to Content
StylingPadding

Padding

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

Name

Styles

0
2
4
6
8
10
12
16
20
24
32
40
48
64
80

#

Documentation

#

Usage

Use the p prop to set the padding on all sides 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

Use the px prop to set inline padding on left and right side and py prop to set block padding on top and bottom of elements.

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

Use the pt (padding-top), pr (padding-right), pb (padding-bottom), and pl (padding-left) props to set padding on individual sides of an element.

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>
  );
}
Last updated on
MarginZ-Index