# spacing


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Padding Utilities

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

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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
```

</details>

### Basic Padding

Apply padding to all sides of an element:

------------------------------------------------------------------------

### test_spacing_basic_examples

``` python

def test_spacing_basic_examples(
    
):

```

*Test basic padding utilities with various scale values.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

### Directional Padding

Apply padding to specific sides:

------------------------------------------------------------------------

### test_spacing_directional_examples

``` python

def test_spacing_directional_examples(
    
):

```

*Test directional padding utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

### Arbitrary Values

Use custom values when needed:

------------------------------------------------------------------------

### test_spacing_arbitrary_examples

``` python

def test_spacing_arbitrary_examples(
    
):

```

*Test padding utilities with arbitrary and custom values.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

## Margin Utilities

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

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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
```

</details>

### Basic Margin

Apply margin to all sides:

------------------------------------------------------------------------

### test_spacing_margin_examples

``` python

def test_spacing_margin_examples(
    
):

```

*Test basic margin utilities with various scale values.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

### Directional Margin

Apply margin to specific sides:

------------------------------------------------------------------------

### test_spacing_margin_directional_examples

``` python

def test_spacing_margin_directional_examples(
    
):

```

*Test directional margin utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

### Negative Margins

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

------------------------------------------------------------------------

### test_spacing_negative_examples

``` python

def test_spacing_negative_examples(
    
):

```

*Test negative margin utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

------------------------------------------------------------------------

### test_spacing_logical_examples

``` python

def test_spacing_logical_examples(
    
):

```

*Test logical properties for padding and margin utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

## Space Between Utilities

Tailwind also provides utilities for adding space between child
elements.

------------------------------------------------------------------------

### SpaceFactory

``` python

def SpaceFactory(
    
):

```

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

------------------------------------------------------------------------

### test_spacing_space_between_examples

``` python

def test_spacing_space_between_examples(
    
):

```

*Test space between child elements utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
space = SpaceFactory() # The space factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

## Practical Examples

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

------------------------------------------------------------------------

### test_spacing_fasthtml_examples

``` python

def test_spacing_fasthtml_examples(
    
):

```

*Test spacing utilities in practical FastHTML component examples.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

``` html
<div class="grid gap-5">
  <div class="p-6 m-4">
    <h2 class="pb-2">Card Title</h2>
    <p class="pb-4">Card content goes here.</p>
<button class="px-4 py-2">Action</button>  </div>
  <div class="m-4">
    <div class="p-4 -mb-8">Header</div>
    <div class="p-8">Content</div>
  </div>
  <div class="mx-auto p-8 max-w-4xl">Centered content</div>
</div>
```

``` python
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

``` python

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

``` python

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

``` python

def test_spacing_helper_examples(
    
):

```

*Test helper functions for common spacing patterns.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

## Modifiers with Spacing Utilities

Spacing utilities support all Tailwind modifiers for conditional
styling:

------------------------------------------------------------------------

### test_spacing_modifier_examples

``` python

def test_spacing_modifier_examples(
    
):

```

*Test spacing utilities with modifiers for conditional styling.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

------------------------------------------------------------------------

### test_spacing_enhanced_factory_examples

``` python

def test_spacing_enhanced_factory_examples(
    
):

```

*Test enhanced SingleValueFactory support in spacing utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

## Export