tailwindcss/docs/source/docs/spacing.blade.md

extends	title	description	features
_layouts.documentation	Spacing	Utilities for controlling an element's padding and margin.	responsive customizable hover focus true true false false

@include('_partials.work-in-progress')

Control an element's padding and margin using the .p{side?}-{size}, .m{side?}-{size}, and .-m{side?}-{size} utilities.

For example, .pt-2 would add .5rem of padding to the top of the element, .mx-0 would make the horizontal margin zero, and .-mb-6 would add a 1.5remnegative margin to the bottom of an element.

Class

p Padding

m Margin

-m Negative Margin

Side (optional)

  All (default)

t Top

r Right

b Bottom

l Left

x Horizontal

y Vertical

Space

0 0

1 0.25rem

2 0.5rem

3 0.75rem

4 1rem

6 1.5rem

8 2rem

px 1px

auto auto (margins only)

Customizing

Responsive, Hover, and Focus Variants

By default, no hover, focus, or group-hover variants are generated for margin, negative margin and padding utilities.

You can control which variants are generated for the list utilities by modifying the margin, negativeMargin and padding property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants of the margin utilities, hover variants of the negative margin utilities, and focus variants of the padding utilities:

{
    // ...
    modules: { 
        // ...
        margin: ['responsive', 'hover', 'focus'],
        negativeMargin: ['responsive', 'hover'],
        padding: ['responsive', 'focus'],
    }
}

Disabling

If you aren't using the margin, the negative margin, or padding utilities in your project, you can disable them entirely by setting the margin, negativeMargin and padding property to false in the modules section of your config file:

{
    // ...
    modules: {
        // ...
        margin: false,
        negativeMargin: false,
        padding: false,
    }
}