py-1 [&>p]:inline

py-1 [&>p]:inline

This article explains the utility and meaning of the CSS/Tailwind-like class string py-1 [&>p]:inline, how it works, when to use it, and practical examples.

What it means

• py-1: shorthand (commonly from utility CSS frameworks like Tailwind) that sets vertical padding — padding-top and padding-bottom — to a small unit (typically 0.25rem when using Tailwind’s default scale).
• [&>p]:inline: a JIT-style arbitrary variant that targets direct child

  elements of the element carrying the class and applies display: inline to them. The & represents the parent selector; >p means direct child paragraphs.

Combined, the string applies vertical padding to a container and forces any direct paragraph children to render inline (so they won’t create block-level line breaks).

Why and when to use it

• Inline paragraphs: Use when you want paragraph elements inside a container to flow inline with surrounding text — for example, when paragraphs are used purely for semantic grouping but you want them visually inline.
• Compact vertical spacing: py-1 gives subtle vertical spacing without large gaps.
• Utility-first workflow: Keeps styles colocated on elements without writing separate CSS files or custom classes.

Practical examples

1. Making paragraph children inline inside a toolbar-like container:

<div class=“py-1 [&>p]:inline”><p>Tool A</p>  <p>Tool B</p>  <p>Tool C</p></div>

Result: “Tool A Tool B Tool C” on a single line (subject to wrapping) with small vertical padding on the container.

2. Inline disclaimers or meta info:

<footer class=“py-1 text-sm [&>p]:inline”>  <p>© 2026 Example Corp.</p>  <p>All rights reserved.</p></footer>

3. Avoiding unintended block spacing when using CMS content that outputs

   wrappers:

<article class=“py-1 [&>p]:inline”>    <p>By Author</p>  <p>•</p>  <p>March 28, 2026</p></article>

Caveats and alternatives

• Accessibility & semantics: Paragraphs are block-level and expected to represent separate blocks of text; converting them to inline can be fine visually but ensure it doesn’t confuse semantics or screen readers. If content is not truly paragraph-like, consider using or instead.
• Specificity & cascade: The arbitrary variant compiles to a selector like .parent > p { display: inline; }. If other styles target the same elements with higher specificity, you may need to increase specificity or use a different approach.
• Browser behavior: Inline paragraphs will not accept vertical margins the same way block paragraphs do; adjust spacing with padding on the container or margin on inline elements as needed.

Summary

py-1 [&>p]:inline is a compact utility-class combination that adds small vertical padding to a container while forcing its direct paragraph children to render inline. It’s handy for controlling visual flow when working with generated markup or when semantic

tags are preferred but block behavior is not desired. Use thoughtfully to preserve semantic meaning and accessibility.