-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;

py-1 [&>p]:inline

What this does

The utility of the CSS-like class selector “py-1 [&>p]:inline” is to apply vertical padding then change direct child paragraph elements to display inline. It’s commonly used in utility-first CSS frameworks (like Tailwind CSS) that support arbitrary variants or the bracketed selector syntax.

Breakdown

• py-1 — adds small vertical padding (padding-top and padding-bottom). In Tailwind this corresponds to 0.25rem by default.
• [&>p]:inline — a bracketed arbitrary variant that targets direct child

  elements and sets their display to inline.

Example HTML

<div class=“py-1 [&>p]:inline”><p>This paragraph will be inline.</p>  <p>So will this one — they’ll flow on the same line if space allows.</p>  <span>This span is unaffected.</span></div>

When to use

• When you want spacing around a container but want paragraphs inside to behave like inline elements (for compact flows, inline separators, or to remove block spacing between paragraphs).
• Useful in UI components where semantic paragraphs are desired but block layout would break visual rhythm.

CSS-equivalent

If you prefer plain CSS instead of utility classes:

.container {  padding-top: 0.25rem;  padding-bottom: 0.25rem;}.container > p {  display: inline;}

Notes and caveats

• Converting paragraphs to inline removes block behavior (no automatic line breaks, vertical margin collapse changes).
• Inline paragraphs cannot contain block-level children.