spacing

Padding and margin utilities for Tailwind CSS

Padding Utilities

Tailwind CSS provides comprehensive padding utilities that can be applied to all sides or specific sides of an element.

Exported source 
p = DirectionalScaledFactory("p", SPACING_CONFIG, "Padding utilities for controlling element padding") # The padding factory

# Additional directional padding utilities for logical properties
ps = ScaledFactory("ps", SPACING_CONFIG, "Padding inline-start utilities (logical property)")  # padding-inline-start
pe = ScaledFactory("pe", SPACING_CONFIG, "Padding inline-end utilities (logical property)")  # padding-inline-end

Basic Padding

Apply padding to all sides of an element:

test_spacing_basic_examples


def test_spacing_basic_examples(
    
):

Test basic padding utilities with various scale values.

Exported source 
def test_spacing_basic_examples(
):
    """Test basic padding utilities with various scale values."""
    # Numeric scales
    assert str(p(0)) == "p-0"
    assert str(p(4)) == "p-4"
    assert str(p(8)) == "p-8"
    assert str(p(2.5)) == "p-2.5"
    
    # Special values
    assert str(p.px) == "p-px"
    assert str(p.auto) == "p-auto"

# Run the tests
test_spacing_basic_examples()

Directional Padding

Apply padding to specific sides:

test_spacing_directional_examples


def test_spacing_directional_examples(
    
):

Test directional padding utilities.

Exported source 
def test_spacing_directional_examples(
):
    """Test directional padding utilities."""
    # Individual sides
    assert str(p.t(4)) == "pt-4" # (top)
    assert str(p.r(4)) == "pr-4" # (right)
    assert str(p.b(4)) == "pb-4" # (bottom)
    assert str(p.l(4)) == "pl-4" # (left)
    
    # Horizontal and vertical
    assert str(p.x(8)) == "px-8" # (left and right)
    assert str(p.y(8)) == "py-8" # (top and bottom)

# Run the tests
test_spacing_directional_examples()

Arbitrary Values

Use custom values when needed:

test_spacing_arbitrary_examples


def test_spacing_arbitrary_examples(
    
):

Test padding utilities with arbitrary and custom values.

Exported source 
def test_spacing_arbitrary_examples(
):
    """Test padding utilities with arbitrary and custom values."""
    # Arbitrary values
    assert str(p("10px")) == "p-[10px]"
    assert str(p("2.5rem")) == "p-[2.5rem]"
    assert str(p.x("calc(50% - 1rem)")) == "px-[calc(50% - 1rem)]"
    
    # Custom properties
    assert str(p("--spacing-lg")) == "p-(--spacing-lg)"
    assert str(p.y("--spacing-vertical")) == "py-(--spacing-vertical)"

# Run the tests
test_spacing_arbitrary_examples()

Margin Utilities

Margin utilities work exactly like padding utilities but can also have negative values.

Exported source 
m = DirectionalScaledFactory("m", SPACING_CONFIG, "Margin utilities for controlling element margin") # The margin factory

# Additional directional margin utilities for logical properties
ms = ScaledFactory("ms", SPACING_CONFIG, "Margin inline-start utilities (logical property)")  # margin-inline-start
me = ScaledFactory("me", SPACING_CONFIG, "Margin inline-end utilities (logical property)")  # margin-inline-end

Basic Margin

Apply margin to all sides:

test_spacing_margin_examples


def test_spacing_margin_examples(
    
):

Test basic margin utilities with various scale values.

Exported source 
def test_spacing_margin_examples(
):
    """Test basic margin utilities with various scale values."""
    # Numeric scales
    assert str(m(0)) == "m-0"
    assert str(m(4)) == "m-4"
    assert str(m(8)) == "m-8"
    assert str(m(2.5)) == "m-2.5"
    
    # Special values
    assert str(m.px) == "m-px"
    assert str(m.auto) == "m-auto"

# Run the tests
test_spacing_margin_examples()

Directional Margin

Apply margin to specific sides:

test_spacing_margin_directional_examples


def test_spacing_margin_directional_examples(
    
):

Test directional margin utilities.

Exported source 
def test_spacing_margin_directional_examples(
):
    """Test directional margin utilities."""
    # Individual sides
    assert str(m.t(4)) == "mt-4" # (top)
    assert str(m.r(4)) == "mr-4" # (right)
    assert str(m.b(4)) == "mb-4" # (bottom)
    assert str(m.l(4)) == "ml-4" # (left)
    
    # Horizontal and vertical
    assert str(m.x(8)) == "mx-8" # (left and right)
    assert str(m.y(8)) == "my-8" # (top and bottom)
    
    # Auto for centering
    assert str(m.x.auto) == "mx-auto" # (center horizontally)

# Run the tests
test_spacing_margin_directional_examples()

Negative Margins

Use negative margins to pull elements outside their parent or overlap:

test_spacing_negative_examples


def test_spacing_negative_examples(
    
):

Test negative margin utilities.

Exported source 
def test_spacing_negative_examples(
):
    """Test negative margin utilities."""
    # Negative values using negative=True
    assert str(m(4, negative=True)) == "-m-4"
    assert str(m.t(2, negative=True)) == "-mt-2"
    
    # Negative values using .negative property
    assert str(m.negative(4)) == "-m-4"
    assert str(m.t.negative(2)) == "-mt-2"
    assert str(m.x.negative(8)) == "-mx-8"
    
    # Negative special values
    assert str(m.negative.px) == "-m-px"
    assert str(m.y.negative.px) == "-my-px"

# Run the tests
test_spacing_negative_examples()

test_spacing_logical_examples


def test_spacing_logical_examples(
    
):

Test logical properties for padding and margin utilities.

Exported source 
def test_spacing_logical_examples(
):
    """Test logical properties for padding and margin utilities."""
    # Logical padding properties
    assert str(ps(4)) == "ps-4" # (padding-inline-start)
    assert str(pe(4)) == "pe-4" # (padding-inline-end)
    
    # Logical margin properties
    assert str(ms(4)) == "ms-4" # (margin-inline-start)
    assert str(me(4)) == "me-4" # (margin-inline-end)
    assert str(ms.auto) == "ms-auto"
    assert str(me.auto) == "me-auto"
    
    # Negative logical margins
    assert str(ms.negative(2)) == "-ms-2"
    assert str(me.negative(2)) == "-me-2"

# Run the tests
test_spacing_logical_examples()

Space Between Utilities

Tailwind also provides utilities for adding space between child elements.

SpaceFactory


def SpaceFactory(
    
):

Special factory for space utilities that control spacing between child elements.

test_spacing_space_between_examples


def test_spacing_space_between_examples(
    
):

Test space between child elements utilities.

Exported source 
space = SpaceFactory() # The space factory
Exported source 
def test_spacing_space_between_examples(
):
    """Test space between child elements utilities."""
    # Horizontal spacing between children
    assert str(space.x(4)) == "space-x-4"
    assert str(space.x(8)) == "space-x-8"
    assert str(space.x(0)) == "space-x-0"
    assert str(space.x.px) == "space-x-px"
    
    # Vertical spacing between children
    assert str(space.y(4)) == "space-y-4"
    assert str(space.y(8)) == "space-y-8"
    
    # Negative space (overlap children)
    assert str(space.x.negative(2)) == "-space-x-2"
    assert str(space.y.negative(4)) == "-space-y-4"
    
    # Space reverse utilities using factory
    assert str(space.x_reverse) == "space-x-reverse"
    assert str(space.y_reverse) == "space-y-reverse"

# Run the tests
test_spacing_space_between_examples()

Practical Examples

Let’s see how to use these utilities in real FastHTML components:

test_spacing_fasthtml_examples


def test_spacing_fasthtml_examples(
    
):

Test spacing utilities in practical FastHTML component examples.

Exported source 
def test_spacing_fasthtml_examples(
):
    """Test spacing utilities in practical FastHTML component examples."""
    from fasthtml.common import Div, P, Button, H2
    from cjm_fasthtml_tailwind.utilities.sizing import max_w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    
    # Card component with padding
    card = Div(
        H2("Card Title", cls=combine_classes(p.b(2))),
        P("Card content goes here.", cls=combine_classes(p.b(4))),
        Button("Action", cls=combine_classes(p.x(4), p.y(2))),
        cls=combine_classes(p(6), m(4))
    )
    
    # Show the generated classes
    assert card.attrs['class'] == "p-6 m-4"
    assert card.children[0].attrs['class'] == "pb-2"
    assert card.children[2].attrs['class'] == "px-4 py-2"
    
    # Layout with negative margins
    overlap_layout = Div(
        Div("Header", cls=combine_classes(p(4), m.b.negative(8))),
        Div("Content", cls=combine_classes(p(8))),
        cls=m(4)
    )
    
    assert overlap_layout.children[0].attrs['class'] == "p-4 -mb-8"
    
    # Centered container with auto margins
    centered_container = Div(
        "Centered content",
        cls=combine_classes(m.x.auto, p(8), max_w._4xl)
    )
    
    assert centered_container.attrs['class'] == "mx-auto p-8 max-w-4xl"
    
    # Return all examples in a grid layout
    return Div(
        card,
        overlap_layout,
        centered_container,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_spacing_fasthtml_examples()

Card Title

Card content goes here.

Header
Content
Centered content
test_func = test_spacing_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Helper Functions

Convenient functions for common spacing patterns:

pad


def pad(
    all:Union=None, # Padding for all sides
    x:Union=None, # Horizontal padding
    y:Union=None, # Vertical padding
    t:Union=None, # Top padding
    r:Union=None, # Right padding
    b:Union=None, # Bottom padding
    l:Union=None, # Left padding
)->str: # Space-separated padding classes

Generate padding classes with a convenient API.

margin


def margin(
    all:Union=None, # Margin for all sides
    x:Union=None, # Horizontal margin
    y:Union=None, # Vertical margin
    t:Union=None, # Top margin
    r:Union=None, # Right margin
    b:Union=None, # Bottom margin
    l:Union=None, # Left margin
    negative:bool=False, # Apply negative margins
)->str: # Space-separated margin classes

Generate margin classes with a convenient API.

test_spacing_helper_examples


def test_spacing_helper_examples(
    
):

Test helper functions for common spacing patterns.

Exported source 
def test_spacing_helper_examples(
):
    """Test helper functions for common spacing patterns."""
    # Test pad helper
    assert pad(4) == "p-4"
    assert pad(x=8, y=4) == "px-8 py-4"
    assert pad(t=2, b=4, x=6) == "px-6 pt-2 pb-4"
    
    # Test margin helper
    assert margin(4) == "m-4"
    assert margin(x="auto", y=8) == "mx-auto my-8"
    assert margin(t=4, negative=True) == "-mt-4"

# Run the tests
test_spacing_helper_examples()

Modifiers with Spacing Utilities

Spacing utilities support all Tailwind modifiers for conditional styling:

test_spacing_modifier_examples


def test_spacing_modifier_examples(
    
):

Test spacing utilities with modifiers for conditional styling.

Exported source 
def test_spacing_modifier_examples(
):
    """Test spacing utilities with modifiers for conditional styling."""
    # Test hover states
    assert str(p(4).hover) == "hover:p-4"
    assert str(m.x(8).hover) == "hover:mx-8"
    assert str(p.t(2).hover.focus) == "focus:hover:pt-2"
    
    # Test responsive modifiers
    assert str(p(4).sm) == "sm:p-4"
    assert str(p(4).max_sm) == "max-sm:p-4"
    assert str(m.x(8).md) == "md:mx-8"
    assert str(m.x(8).max_md) == "max-md:mx-8"
    assert str(p.y(0).lg) == "lg:py-0"
    assert str(m.negative(4).xl) == "xl:-m-4"
    
    # Test dark mode
    assert str(p(8).dark) == "dark:p-8"
    assert str(m.x.auto.dark) == "dark:mx-auto"
    
    # Test chained modifiers
    assert str(p(4).hover.md) == "md:hover:p-4"
    assert str(m(8).dark.lg.hover) == "hover:lg:dark:m-8"
    
    # Test with space utilities
    assert str(space.x(4).hover) == "hover:space-x-4"
    assert str(space.y(2).md) == "md:space-y-2"

# Run the tests
test_spacing_modifier_examples()

test_spacing_enhanced_factory_examples


def test_spacing_enhanced_factory_examples(
    
):

Test enhanced SingleValueFactory support in spacing utilities.

Exported source 
def test_spacing_enhanced_factory_examples(
):
    """Test enhanced SingleValueFactory support in spacing utilities."""
    # Test space reverse utilities with modifiers
    assert str(space.x_reverse) == "space-x-reverse"
    assert str(space.x_reverse.hover) == "hover:space-x-reverse"
    
    assert str(space.y_reverse) == "space-y-reverse"
    assert str(space.y_reverse.md) == "md:space-y-reverse"
    assert str(space.y_reverse.dark) == "dark:space-y-reverse"
    
    # Test combining space utilities with modifiers
    from fasthtml.common import Div, Ul, Li
    
    # Responsive list spacing
    list_container = Ul(
        Li("Item 1"),
        Li("Item 2"),
        Li("Item 3"),
        cls=combine_classes(
            space.y(2),           # Default spacing
            space.y(4).md,        # Larger spacing on medium screens
            "flex flex-col"
        )
    )
    
    assert "space-y-2" in list_container.attrs['class']
    assert "md:space-y-4" in list_container.attrs['class']

# Run the tests
test_spacing_enhanced_factory_examples()

Export