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
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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      alignItems="center"
      flexDirection={["column", "row"]}
      gap="16"
      justifyContent="space-around"
      w="full"
    >
      <DemoBox p="32">p=32</DemoBox>
      <DemoBox p="12">p=12</DemoBox>
      <DemoBox p="16">p=16</DemoBox>
      <DemoBox p="24">p=24</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      rounded="sm"
      {...props}
    >
      <Text bg="bg.default.pressed" p="4" rounded="inherit">
        {children}
      </Text>
    </Box>
  );
}

#

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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      alignItems="center"
      flexDirection={["column", "row"]}
      gap="16"
      justifyContent="space-around"
      w="full"
    >
      <DemoBox p="24">p=24</DemoBox>
      <DemoBox px="24">px=24</DemoBox>
      <DemoBox py="24">py=24</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      rounded="sm"
      {...props}
    >
      <Text bg="bg.default.pressed" p="4" rounded="inherit">
        {children}
      </Text>
    </Box>
  );
}

#

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 type { ComponentPropsWithoutRef } from "react";
 
import { Box, Group, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      alignItems="center"
      flexDirection={["column", "row"]}
      gap="16"
      justifyContent="space-around"
      w="full"
    >
      <DemoBox pt="12">pt=12</DemoBox>
      <DemoBox pr="16">pr=16</DemoBox>
      <DemoBox pb="24">pb=24</DemoBox>
      <DemoBox pl="32">pl=32</DemoBox>
    </Group>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      rounded="sm"
      {...props}
    >
      <Text bg="bg.default.pressed" p="4" rounded="inherit">
        {children}
      </Text>
    </Box>
  );
}
Last updated on
OverflowZ-Index