py-1 [&>p]:inline

py-1 [&>p]:inline

This article explains the utility-class-like CSS snippet “py-1 [&>p]:inline”, what it does, when to use it, and how to implement equivalent behavior with plain CSS. It’s written for front-end developers familiar with utility-first frameworks (Tailwind CSS) and modern CSS selectors.

What it means (high-level)

• py-1: sets vertical padding (padding-top and padding-bottom) to a small size (commonly 0.25rem in Tailwind).
• [&>p]:inline: uses a variant that targets direct child

  elements of the element the class is applied to, forcing those

  elements to be displayed inline.

Combined, the utility applies vertical padding to an element while changing the display of its immediate paragraph children to inline.

Why you might use this

• To create a compact, inline flow for paragraphs nested directly inside a container while keeping a small vertical spacing on the container itself.
• Situations where semantic

  elements are desirable for accessibility/authoring, but the visual layout requires inline flow (for example, inline tags, short caption blocks, or mixing text with inline badges).

• When using a utility-first workflow (Tailwind) and you want a single class to express both the container spacing and the child display rule.

Example (Tailwind-style)

Assume Tailwind with JIT and support for arbitrary variants:

HTML:

Rendered result:

• The container gets small vertical padding.
• The two

  elements behave like inline elements (flowing on the same line unless wrapped), matching the span.

Equivalent plain CSS

If you can’t or don’t want to use the utility variant syntax, you can achieve the same effect with plain CSS:

.container {
padding-top: 0.25rem; / equivalent to py-1 in Tailwind default scale /
padding-bottom: 0.25rem;
}
.container > p {
display: inline;
margin: 0; / reset default paragraph margins that could interfere /
}

HTML:

Notes:

• Resetting default margins on

  is important; otherwise browser default margins (top/bottom) will still affect layout.

• If you need inline behavior but want block-level box properties (width, vertical padding) preserved, consider display: inline-block instead of inline.

Variations and considerations

• Use inline-block if you want the paragraphs to be inline but still accept width/height/padding.
• For wrapping control, use white-space or flexbox on the parent depending on desired wrapping behavior.
• If paragraphs have inner block-level content, converting them to inline may cause unexpected nesting issues; prefer refactoring markup (e.g., use or
  ) when appropriate.

• In Tailwind, ensure your config allows arbitrary variants ([&>p]:…) or add a plugin/variant to support such selectors.

Quick checklist before using this pattern

• Do you need semantic

  elements? If not, consider inline elements like .

• Have you reset

  margins to avoid extra spacing?

• Would inline-block or flex give more predictable layout?
• Confirm browser support for your chosen display mode and any special selectors.

Summary

“py-1 [&>p]:inline” is a compact expression (common in Tailwind/JIT) that applies small vertical padding to a container while forcing its direct paragraph children to render inline. Use it when you want semantic paragraphs to flow inline; otherwise prefer simpler inline elements or adjust display to inline-block for richer box behavior.