YouTip

Tailwind CSS Spacing is an important component of layout. Spacing refers to the distance between elements, including padding, margin, line height, letter spacing, etc. Tailwind CSS provides a set of commonly used utility classes, making the configuration of these spacing properties simpler and more intuitive. * * * ## Margin Margin is used to control the distance between an element and other elements. Tailwind provides concise utility classes to set margins. The common format is `m-{size}`, where `m` stands for margin and `{size}` is the specific value. * `m-{size}`: Sets the margin for all four sides. * `mt-{size}`: Sets the top margin (margin-top). * `mr-{size}`: Sets the right margin (margin-right). * `mb-{size}`: Sets the bottom margin (margin-bottom). * `ml-{size}`: Sets the left margin (margin-left). * `mx-{size}`: Sets the horizontal margin (left and right margins). * `my-{size}`: Sets the vertical margin (top and bottom margins). Common margin values: * `m-0`: Sets the margin to 0. * `m-1` to `m-64`: Sets margins of different sizes, defaulting to `rem` units. * `m-px`: Sets the margin to 1px. * `m-auto`: Sets the margin to auto, commonly used for center alignment. Use the `mt-*`, `mr-*`, `mb-*`, and `ml-*` utility classes to control the margin on a specific side of an element. For example, `mt-6` adds a 1.5rem margin to the top of the element, `mr-4` adds a 1rem margin to the right side, `mb-8` adds a 2rem margin to the bottom, and `ml-2` adds a 0.5rem margin to the left side. ## Example [Try it »](#) In this example, `mt-6` sets the top margin, `mr-4` sets the right margin, `mb-8` sets the bottom margin, and `ml-2` sets the left margin. Use the mx-* utility to control an element's horizontal margin. Use the my-* utility to control an element's vertical margin. Use the m-* utility to control an element's margin on all sides. * * * ## Padding Padding is used to control the distance between an element's content and its border. Like margin, Tailwind also provides a rich set of utility classes for padding. * `p-{size}`: Sets the padding for all four sides. * `pt-{size}`: Sets the top padding (padding-top). * `pr-{size}`: Sets the right padding (padding-right). * `pb-{size}`: Sets the bottom padding (padding-bottom). * `pl-{size}`: Sets the left padding (padding-left). * `px-{size}`: Sets the horizontal padding (left and right padding). * `py-{size}`: Sets the vertical padding (top and bottom padding). Common padding values: * `p-0`: Sets the padding to 0. * `p-1` to `p-64`: Sets padding of different sizes. * `p-px`: Sets the padding to 1px. ## Example [Try it »](#) Use the px-* utility to control an element's horizontal padding. Use the py-* utility to control an element's vertical padding. Use the p-* utility to control an element's padding on all sides. Use the ps-* and pe-* utilities to set the padding-inline-start and padding-inline-end logical properties, which map to the left or right side depending on the text direction. ## Example [Try it »](#) * * * ## Line Height Line height controls the vertical spacing between lines of text. Tailwind provides leading-{size} utility classes to adjust line height. Common line height values: * `leading-none`: Sets the line height to 1 (no spacing). * `leading-tight`: Sets a tighter line height. * `leading-snug`, `leading-normal`, `leading-loose`: Provide different line height values. * `leading-{size}`: Sets an exact line height using the specified unit. ## Example

This is tight text.

This is looser text.

[Try it »](#) * * * ## Letter Spacing Letter spacing controls the horizontal spacing between text characters. Tailwind uses tracking-{size} utility classes to adjust letter spacing. Common letter spacing values: * `tracking-tight`: Decreases letter spacing. * `tracking-normal`: Sets normal letter spacing. * `tracking-wide`: Increases letter spacing. * `tracking-{size}`: Sets letter spacing using the specified unit. ## Example

Tight text

Wide text

[Try it »](#) * * * ## Gap Gap is used to set the spacing between elements in a Grid layout or Flexbox layout. It adds spacing between all child elements, especially useful for creating consistent gaps in layouts. Common gap values: * `gap-0`: Sets the gap to 0. * `gap-1` to `gap-64`: Sets different gap values. ## Example [Try it »](#)