p]:inline” data-streamdown=”list-item”>Road HDR: Enhancing Urban Landscapes with High Dynamic Range Photography

py-1 [&>p]:inline

What this selector does

This utility-style class combines two parts:

• py-1 — a spacing utility that applies vertical padding (padding-top and padding-bottom) of 0.25rem (commonly used in utility CSS frameworks; exact value depends on your design system).
• [&>p]:inline — a variant using a CSS selector to target direct child

  elements and set their display to inline.

Together, py-1 [&>p]:inline applies small vertical padding to the element while forcing any immediate

children to render inline instead of the default block layout.

When to use it

Use this pattern when you need an element (container) to maintain vertical spacing but want its direct paragraph children to flow inline — for example, when converting paragraphs into inline labels, short text runs, or when mixing paragraphs with other inline elements inside a padded container.

HTML example

<div class=“py-1 [&>p]:inline”><p>Label 1</p>  <p>Label 2</p>  <span>— details</span></div>

Rendered effect: the container keeps vertical padding; the two

elements appear inline next to the , like inline text.

CSS equivalent

If your tooling doesn’t support the bracketed selector, you can achieve the same with plain CSS:

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

Then:

<div class=“my-container”>  <p>Label 1</p><p>Label 2</p></div>

Notes and caveats

• Inline paragraphs lose block semantics (no vertical margins, width, or block stacking); avoid using this for long paragraphs or where accessibility/semantic structure matters.
• If your utility framework uses different spacing scales, confirm py-1 value in your config.
• To target deeper paragraph descendants (not just direct children), use a descendant selector: [& p]:inline or adjust the CSS accordingly.